Design and Development of A Blog Site
Design and Development of A Blog Site
This project is submitted to the Department of Computer Science and Engineering, Dhaka
International University, in partial fulfillment to the requirements of Bachelor of Science (B. Sc.) in
Computer Science and Engineering (CSE).
Submitted by
Supervised by
Name: Md. Habibullah Belali
Designation: Assistant professor
ii
SUPERVISOR’S STATEMENT
This is to certify that the project paper entitled as “Design and development of a blog” submitted by Roll
No:- 35,Roll No:- 51, Roll No:- 36, D, Roll No:- 05 has been carried out under my supervision. This project
has been prepared in partial fulfillment of the requirement for the Degree of B.Sc. in Computer Science &
Engineering, Department of Computer Science & Engineering, Dhaka International University, Dhaka,
Bangladesh.
Supervisor’s Signature
iii
APPROVAL
The project report as “Design and development a blog website” submitted by Md Fahad Hossain, Saiful
Kawsar Bhuyan, Samim, Raihan to the Department of Computer Science & Engineering, Dhaka International
University, has been accepted as satisfactory for the partial fulfillment of the requirements for the degree
of B.Sc. in Computer Science and Engineering and approved as to its style and contents.
1. Chairman ..........................................................................
Prof. Dr. A. T. M. Mahbubur Rahman
Dean,
Faculty of Science and Engineering,
and Chairman,
Dept. of Computer Science and Engineering,
Dhaka International University
iv
DECLARATION
We hereby declare that; this project has been carried out by us and it has been submitted for the award of the
B.Sc. degree. We also certify that this project was prepared by us for the purpose of fulfillment of the
requirements for the Bachelor of Science (B.Sc.) in Computer Science & Engineering.
Authors Signature
...................................... …………......................................
Supervisor’s Signature
v
ABSTRACT
The title of the project is Design and development a blog website. This is a web blog site. Users will be
able to use this blog site easily. Bloggers will be able to upload their content on this blog site. This blog site
can be a good source of income for students. This blog site will have information from different universities,
through which students will get all the information they need. This blog site will have many important issues
as well as source of income. Bloggers regularly post content on their website and users can retrieve the
information they need and post their comments there. Also, in recent times, blogs are becoming a medium of
freelance journalism and online income. One or more bloggers update it regularly on the latest
developments. Now blogs have become a social media instead of a personal dairy. This can be a great way
for those who want to make money online. We hope everyone will benefit from this Blog site.
ACKNOWLEDGEMENTS
We would like to pay our gratitude to the Almighty Allah who created us with not only the ability to design
and program this system but also the power of practice.
We would also like to express our sincere thanks to our respected supervisor Name, Designation,
Department of CSE, Dhaka International University for his continuous encouragement, motivation and
professional guidance during the work of this project.
We would like to thank all the faculty members for their valuable time spent on requirements analysis and
evaluation of the project work.
We would like to express our sincere and cordial gratitude to the people those who have supported us
directly, provided mental encouragement. We are also thankful to our family and friends who have
contributed directly or indirectly the development word and its associated activities.
We warmly thank Prof. Dr. A. T. M. Mahbubur Rahman, Dean (Acting), Faculty of Science and
Engineering and Chairman, Department of Computer Science and Engineering and Associate Prof. Md.
Abdul Based, Chairman, Electrical & Electronics Engineering, Dhaka International University for their
valuable advice and moral support. Their extensive discussion around work and interesting exploration in
operations has been very helpful for this study.
Finally, we would like to dedicate this project to our teachers for their love, encouragement and professional
guidance throughout the project.
DEDICATION
Dedicated to
Our Parents
&
Teachers
LIST OF FIGURES
SUPERVISOR’S STATEMENT.............................................................................................I
APPROVAL.............................................................................................................................II
DECLARATION....................................................................................................................III
ABSTRACT.............................................................................................................................IV
ACKNOWLEDGEMENT.........................................................................................................V
DEDICATION…......................................................................................................................VI
LIST OF FIGURES.................................................................................................................VII
LIST OF TABLES VIII
TABLE OFCONTENTS………………………………………………………... IX-X-XI
7.1 Conclusion…....................................................................................................31
7.2 Limitations.......................................................................................................32
References................................................................................................... 34
Chapter
Introduction
1
• OVERVIEW:
The number of internet users in Bangladesh is increasing day by day. Many have taken advantage of this
opportunity to expand their businesses on the Internet. But there are many who do not know about this. There are
many who are unable to express their views anywhere. Again, there are many who want to make money online but
can't afford it. We have created this platform for them so that they can do everything they need here.
On December 16, 1998, the word "weblog" was first coined by a man named "Jorn Burger". Later, in April or
March 1999, Peter Merholz joked about his own blog, Peterm.com, sharing the word "weblog" as "blog". Since
then, the use of the word 'blog' has been on the rise. Evan Williams uses the word blog in both nouns and verbs,
respectively. He coined the term 'blogger'. Before the popularity of 'blogging', other popular mediums of 'digital
community' or 'online communication' were Usenet, GEnie, BiX, CompuServe, BBS etc. Although they were
popular at that time, with the help of these, the work of running conversation was done with great difficulty. But
thanks to modern blogging, people are now able to easily maintain social communication. Those who blog is
called bloggers. Bloggers can usually call themselves 'Diarists' or 'Journalers'. Justin Hall, who started personal
blogging in 1994. He then studied at Swarthmore College. He is considered to be the oldest blogger in the history
of blogging. The personal blogs of 'Jerry Pournelle' and 'Dave Winer's' were some of the popular blogs of the time.
These were the oldest and longest running popular blogs. As the popularity of blogging grows, so does the
demand for it. Various technologies are added to it. Blogging has grown in popularity since 1999 and still does.
Bruce Ebelson started a blog called Open Diary in October 1997 and his blog grew in popularity overnight.
Thousands of bloggers join his blog and this is the first blog community where other bloggers are given the
opportunity to comment on their writings. In addition, Evan Williams and Meg Hourihan, who worked at Pyra
Labs, launched their own blog site "blogger.com" in 1999, which was acquired by Google in February 2003.
There are two issues involved in launching a blog in Bengali. One. Blogger.com bought by Google and two.
Increase in popularity of Unicode Bangla fonts. Blogger.com launched on August 23, 1999. Google bought
1
Blogger.com in February 2003. Then Google took several initiatives to make Blogger.com popular. It is believed
that as a result of Google's promotion, Bengali speakers became interested in blogs. [1]
• Objective
Our real goal for all is to "create a place for everyone to talk, gather information and create a good source of income
through which many can be financially and humanely happy."
• Register
• Email adders
1.4 Resources
Hardware-1:
• Dell inspiration 15 3000
• Intel core I3 8th Generation
• 8GB DDR3 RAM
• 256 GB SSD (117 GB Space Free)
• 15.6 HD Display
• Free Dos
Hardware-2:
• Hp Notebook
• Intel core I3 5th Generation
• 4GB DDR3 RAM
• 1TD HHD
• 15.6 HD Display
• Free Dos
2
Software:
• Operating System: Windows-10
• Xammp Server [2]
• Visual studio code [3]
• Front End: Html5, css3, JavaScript [4], [5], [6]
• Back End: php, Bootstarp [7], [8]
• Database: MQSQL [9]
• Framework: PHP
Live Server:
Not available
3
Chapter
Background story
2
4
2.1 Project Definition
The project name’ ’Design and development of a blog” is a web blog. Where learning, Earning and Information have
been added.
Through this platform we will try to provide bloggers with content uploads, income management, learning
arrangement and information from all private universities. [10]
5
Chapter
Methodology
3
6
3.1 TECHNICAL SKILLS ACQUIRED:
This project has given me a huge opportunity to gain knowledge as such
through this project we have gained a number of other ideas including marketing, customer demand, current market
value, future market demand, product list of customer preferences, content writing social media marketing instant
support system. I hope all these experiences play a useful role in my future career Will
• Open the Command Pallet (CTRL+SHIFT+P for Windows/Linux or CMD+SHIFT+P on Mac) enter the
command “Install Extension”
Visual Studio Code is a code editor at its most basic level. VS Code, like many other code editors, uses a standard
user interface and layout that includes a left-hand explorer, showing all of the files and folders we have access to, and an
editor on the right, showing the content of the files we have opened.
• Editor - The main area to edit our files. We can open as many editors as we like side by side vertically and
horizontally.
• Side Bar - Contains different views like the Explorer to assist us while working on our project.
7
• Status Bar - Information about the opened project and the files we edit.
• Activity Bar - Located on the far left-hand side, this we switch between views and gives our additional
context-specific indicators, like the number of outgoing changes when Git is enabled.
• Panels – We can display different panels below the editor region for output or debug information, errors and
warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.
• Explorer
The Explorer is used to browse, open, and manage all of the files and folders in our project. VS Code is file and folder
based - we can get started immediately by opening a file or folder in VS Code. [11]
VS Code integrates well with your other tools, particularly command-line tools. If we wish to execute a command-
line tool in the context of the folder we currently have open in VS Code, right-click it and choose Open in Command
Prompt from the context menu.
3.3.5 Views
One of the Views in VS Code is the File Explorer. Views for the following are also available:
• Search - Provides global search and replace across our open folder.
• Run - VS Code's Run and Debug View displays variables, call stacks, and breakpoints.
The XAMPP Control Panel is a management tool that allows us to monitor the activity of specific XAMPP
components. It manages all of the text server's components. By using the buttons below the "Actions" column, the
user can start or stop distinct modules. Control panels efficiently manage all of the XAMPP components. The Control
Panel can be used to check whether Apache, MySQL, Mercury, and other services are currently operational. Only
when Apache and MySQL are
operating can the development environment be used. In the system tray, you'll find the XAMPP Control Panel icon.
It's an orange-colored icon that appears when Panel is active. If the Control Panel is not visible, use these steps to
bring it up:
• Go to All Programs → Apache Friends → XAMPP → XAMPP Control Panel. In case it's already in running
state, you will receive an Error! Message.
9
• The functionality of the Control Panel
The XAMPP Control Panel accommodates several buttons, such as config, help, net stat, quit, shell, explorer, and services. Each
button and its functionality is defined below:
• This button is used to configure the XAMPP as a whole, as well as its discrete components.
• This button offers you to show all the processes currently active on your system.
• This button assists in showing all the services that are currently active in the back-end.
• This button assists the user by providing links to the user forums.
• As the name suggests, this button is used to leave the XAMPP Control Panel.
STEP 1- Open the XAMPP Control Panel by clicking on the shown icon . In case the icon is not visible then,
go to:
• All Programs → Apache Friends → XAMPP → XAMPP Control Panel.
10
Figure-3.5: XAMPP control panel
STEP 2- Click Start button corresponding to Apache and MySQL. It is strongly advised to NOT MARK the Service
checkboxes on the leftmost end because running these modules as a service may cause a clash with other applications
or servers that share standard ports. Establishing and terminating services physically is considered better when one
does not include the Apache and MySQL components to run for a considerable time.
STEP 3- Initially, while starting Apache or MySQL. Security will question us to Allow access to the servers on our
local network in order to unblock the servers and grant access to the system.
STEP 4- The "Actions" button is a toggle button that switches between Start/Stop. The Port information is also
available corresponding to the modules once they are active.
11
Figure- 3.7: XAMPP control panel
STEP 5- Click the Close × button in at the upper right end, which will enable XAMPP to run in the background. It
will now be accessible through the Notification area.
STEP 6- To manage the XAMPP Control Panel while running in the background, we can simply right-click
the XAMPP icon in the notification area and start/stop components without opening it.
STEP 7- Admin and Config buttons for Modules-
Admin: In the case of Apache, it opens XAMPP for Windows Admin page in the default browser, and for MySQL, it
redirects to PHP My Admin in the default browser.
Config: In the case of Apache, it provides access to apache folders and configuration files, like httpd. conf, and for
MySQL, it grants access to MySQL database folders.
STEP 8- In order to suspend the running of any of the components like Apache or MySQL, click the "Stop" button
corresponding to the module we wish to stop.
STEP 9- To stop the Control Panel from running as a background application, click on the "Quit" button at the lower
right end. This will remove the XAMPP Launcher from the Notification Bar. To operate again, XAMPP Control
Panel needs to be Re-launched.
Name Description
HTML Hypertext Markup Language is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies
such as Cascading Style Sheets and scripting languages such as JavaScript
CSS Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML. CSS is
a cornerstone technology of the World Wide Web,
12
JavaScript JavaScript, often abbreviated as JS, is a programming language that conforms to
the ECMAScript specification. JavaScript is high-level, often just-in-time
compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing,
prototype-based object-orientation, and first-class functions
Bootstrap Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first
front-end web development. It contains CSS- and JavaScript-based design templates for
typography, forms, buttons, navigation, and other interface components.
[12]
13
Chapter
Planning
4
14
4.1 Planning Phase consists of:
1) Design Goals
Project design plays the most important role in making any project successful. In fact, what we really want to do, what
features we will have, the source of our product, our customers, why they will buy our pony, these kinds of successful
points are described in detail in this part of the project.
Resource is the key element for the project that will help to create a quality system that will fulfill the business need.
So, during the development time, which resource come from where become an important issue. So, planning for
resource is important. In this plan resource’s place will be allocated that will be easy for development.
How the risk will be handled during the development of the system is defined this stage. It is about the plan for
management risks. There is some rule to identify risks, assessment about those risks and precaution are given.
Identification risk in the planning stage is an important work that prevent the system many possible risks.
.
Internal risk – During the development, some internal issues can arise like data or information misused or
can be stolen that will cause danger to the project. This can take more time to complete the project also.
Technological risk– There can many technological facts that can damage the development of the system
or the system itself like PC crash, develop environment crash, project data lose etc. Virus attack also can be
happened during development. So, this risk has to handle before starting the development.
15
4.2.2 Risk Assessment and action plan
This Risk Assessment Action Plan should be used to record the actions that need to be taken to reduce and manage the
hazards identified by the completion of the relevant Risk Assessment Form. Risk Assessment and action plan is
shown in Table 4.2 below: Table 4.2: Risk Assessment and action plan
16
Chapter
SYSTEM DESIGN DEVELOPMENT and Implementati
5 AND IMPLEMENTATION
17
5.1 INTRODUCTION
A use case is a methodology used in system analysis to identify, clarify, and organize system
requirements. The term system refers to something being developed or operated, such as a Bus
finding or other services of Application. Symbols of Use Case.
Textual requirements are an easy specification method but fails at specifying interactions
between a system and its users. A use case describes an interaction scenario and its possible
alternatives. A use case diagram graphically pictures several use cases, their actors, and their
relationships. The Vendor use case diagram is shown in Figure 5.1 below:
signup
vendor
login
Page | 18
user
Add blog.
Upload blog
visit
Visitor.
contact
blogger
Upload post
Figure-5.2: visitor case diagram
19
5.2 Frontend design: Front page of an application must draw the attention of the user. To make
our application attractive to the user we use some Graphical User Interface (GUI). We design our
project with easily understandable GUI so that, the user can easily access the app. In the front
page we simply add all services of our app by categories. User can tap any categories based on
their needs to see details.
20
Figure-5.2: Frontend design
21
5.3BACK-END DESIGN
Back end design is only seen by the programmer. How will the application interact with the user
is implemented in the back-end? User cannot interact with the back-end design, if there is any
need to change or update any information or data, then this can only. As our project maintain the
information that send by system so, we need to create a database to store this information. And
only admin edits that information. User only read this data. In data write permission is strongly
prohibited. We use MYSQL to create the database
To implement a project, we need different types of tools, components, and software. We also
used some tools and component to implement our project. Since it is an android based
application project so we used android based design tools and components to implement our
application. Here is a short description of the tools and components that required to implement
the application.
22
5.5.1 Visual studio code:
Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling,
like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-
debug cycle means less time fiddling with your environment, and more time executing on your ideas .
The database development life cycle (DDLC) is inherently associated with the software
development life cycle (SDLC) of the information system. DDLC goes hand-in-hand with the
SDLC and database development activities starts right at the requirement phase. Database
development life cycle is shown in Figure 5.6 below:
23
Figure: 5.7.1 DATABASE DEVELOPMENT LIFE CYCLE
The database development life cycle has a number of stages that are followed when developing
database systems. The steps in the development life cycle do not necessarily have to be followed
religiously in a sequential manner. On small database systems, the database system development
life cycle is usually very simple and does not involve a lot of steps. In order to fully appreciate
the above diagram, let's look at the individual components listed in each step.
24
Figure 5.7.3Dataflow diagram
The data store on MYSQL data base backend. This figure below
25
5.8 IMLEMENTATION OF FRONT-END DESIGN:
Only the front-end design is visible to the user. So, it should affectionate to look at. It also should
user friendly and easy to use. We are trying to make the design clean and user friendly and
Responsive as much as possible. Home page of Farm2cook is shown in Figure below:
26
5.8.3 Login/Registration:
If the consumer/customer our existing customer, they need to login or consumer/customer are
new on this application they need to registration .login:
27
Figure:5.8.5user Registration panel
28
5.9 contact panel:
29
5.9.2: member chatting panel:
30
Chapter
Testing
6
31
6.1 TEST CASE
A test case is a set of actions executed to verify a particular feature or functionally of your
software application. A test Case contains test steps, test data, pre-condition, post condition
developed for specific test scenario to verify any requirement. Two different testing of Web
application is shown In Tables 6.1 & 6.2 below:
Heading Description
Heading Description
Steps 1. Click all menus, read blog, contact button, real time chat
32
Unit testing is a level of software testing where individual unites / components of software are
tested. The purpose is to validate that each unit of the software preforms as designed. A unit is
the smallest testable part of any software. It usually has one or a few inputs and usually a single
output. Unit testing Analysis of test result is shown in Tables 6.3 below:
Valid admin System redirected to has admin home page in admin section
username and admin home page in admin Successfully login after checking the validity
password section username and password
33
than test data. This testing will continue until the developer and owner agreed to implement the
system.
34
Chapter
Conclusion and future scope
7
35
7.1 CONCLUSION
Design and development a blog website has been developed with the most popular trendy
Bootstarp framework and it’s faster than others framework on php. An easy to use, professional
software system designed to put you in create and highlight all kind of services.
7.2 LIMITATIONS
There are some limitations of our current system, which solutions will do for future
development:
1. Lack of UI performance.
2. Some data accuracy (Data deprecation).
3. Lack of UI performance.
In this project will develop some features in future. Some list are given below
REFERENCES:
36
1. https://en.wikipedia.org/wiki/History_of_blogging#:~:text=The%20term%20%22weblog
%22%20was%20coined,in%20April%20or%20May%201999.
(Last accessed on 21-11- 2021)
37
38