Advanceds Web Application and Development

Submitted by: Areeba Raees (Planning and requirement)

: Maheen Moeed (Designing)
: Atiya Ali (Development)
: Maham Shahid (Development)
: Neha Nasir (Testing)
: Areeba Hameed (deployment)
Submitted to: Sir Rizwan Jameel
Program & Semester: BSIT 6(evening)
Project Topic: Blog Article Writing
System Development Life Cycle(SDLC):

1. Planning:

Introduction:
Blog article writing is the process of creating written content for a blog, typically for online
publication. This content can cover a wide range of topics and can be tailored to suit the
interests of the target audience. The purpose of blog article writing is often to inform,
This website is an online publishing platform where writers can share their ideas and expertise
on various topics. It has a readers/writers-friendly interface and the ability to connect writers,
readers, journalists, and bloggers with a broad audience.
On this website, you can find articles on a wide range of topics, including technology,
entrepreneurship, self-improvement, politics, health, and much more. The platform allows
writers to explore their interests and passions while also providing readers with diverse
perspectives and insights.

Scope:
The primary objective of this website is to allow anyone to share their ideas and stories in a
reader/writer or user or users-friendly interface all over the world. It aims to facilitate
meaningful discussions and connections between the reader and the writer of content. It
provides writers with data on how their articles are performing, including metrics such as likes,
suggestions, and comments. It is a responsive website compatible with mobile and desktop.

 Technical Analysis:

 Technology and Tools:

 From a technology point of view we select appropriate programming languages,
frameworks, and libraries (e.g., Ruby on Rails where ruby is a language and Rails its
framework version 5.2.8). Database management system for storing and retrieving
article content and readers/writers' data (e.g., POSTGRESQL object-relational
database). The operating system will be Ubuntu version 22.2 to execute this project.
For frontend Bootstrap, SASS rails, Coffee rails is used. For data storage, Cloudinary
API is used to store data on the server.
 Hosting and Deployment:
  For hosting and development we can chose Amazon Web Server (AWS) hosting
platform, render, docker and anything based on developer choice to provide
comfortable environment to website. This website is based on the MVC model. The
model interacts with the database it handles all logic of the database its storage,
validation, etc. The controller interacts with the model and views it fetches data
from the model and shows it on the browser to view.

 Roles and responsibility :

 For this project, each team member will have a specific role. One team member will
be responsible for collecting planning and requirements during the initial phase,
while another will design the website. Two team members will work on the
development process, with one handling deployment and another handling testing.

 Estimated development cost and time:

 In the case that the time this website takes to complete will be approximately one
month and the cost will be three to four thousand if deploy on an AWS EC2 virtual
machine. Another can be used as Github and Render that will be free of cost.

 Competitive analysis:

 Strengths, Weaknesses, and competitors differentiation :

 Its strength is there is no limitation to access content, usually readers and writers
do not need to pay to read and write content. Allow readers and writers to write
and find articles on a wide range of and attract a broad range of audiences.
 Its weakness is it does not contain algorithms that support content discovery and
suggestions and money-making policy no option to update profile.
 Its unique writer-reader interaction, storytelling, and knowledge features make it
different from its competitors. Competitors list includes Medium.com, Sabstack,
linked-in articles, Ghost, blogger, Quora spaces, etc.

 Risk management plan :

 The chances of risk are high as there are other websites in comparison to it. In
order to manage risk this website can include more and upgraded features such
as algorithms that analyze readers/writers' behavior to provide AI personalized
recommendations. Or this website can allow its users to make money from this
platform by subscription or through a paid membership option.
Here are some key elements of blog article writing from the MVC point of view:
1. Request submission: The first reader/user makes a request from the browser.
1. Routers: Routers direct the request to the related controller as the user wants to like an
article the router routes it to the like controller.
2. Controller: The controller will go to the associated model to fetch data.
3. Model: The model collects relevant data from the database. The controller takes the
data from the model and then sends it to the view to show it to the reader/user.
4. Devise:.It will lie in view also be associated with the model to manage various tasks.

Here are some key elements of blog article writing from theUser ( writer's )point of view:
2. Create an account: The first writer must have a readers/writer account to write an
article.
5. Topic Selection: Choosing a topic that is relevant to the blog's audience and aligns with
the blog's overall theme.
6. Research: Conducting research to gather information and insights on the chosen topic.
This may involve reading books, articles, or online resources, as well as interviewing
experts if necessary.
7. Outline: Create an outline to organize the structure and flow of the article. This helps
ensure that the content is well-organized and easy to follow.
8. Writing: Writing the actual content of the blog article based on the outline and research
findings. This includes crafting compelling headlines, introductions, body paragraphs,
and conclusions.
9. Engagement: Incorporating elements such as images and interactive features to
enhance reader engagement and retention.
10. Editing and Proofreading: Review the article for grammar, spelling, punctuation, and
factual accuracy. This ensures that the final piece is polished and professional.
11. Publishing: Uploading the finished article to the blog's content management system
(CMS) and public it at the appropriate time.
Overall, blog article writing requires creativity, research skills, and the ability to
effectively communicate ideas in written form.

2. Requirement Gathering:

 Functional Requirement:
 The platform is based on the MVC model have a model, view, and controller. The model
would interact with the controller and database to perform functions like validation of
authenticating the user it maintain the data of the user(reader/writer or user).
The model would have sub-models such as article, user, like, comment, application
record, reply, suggestions, and report.
The controller acts as an application controller that contains sub-controllers such as
article controller, like controller, suggestion controller, comment controller, page
controller, reply controller, and report controller.
The view would contain files such as articles, comments, layout, likes, devise, pages,
reports, replies, and suggestions.
The devise in view devise file will exist that can manage the user its account-related task
also it will link or be related to the model it can manage confirmation, password,
session, registration, etc

 User(Readers/writers) Registration and Authentication:

 User (Readers/writers) should be able to create accounts and log in securely.
 The platform should support authentication methods such as email/password etc. To
make an account or sign up user will be asked about first name, last name, phone
number, email, password, confirm password. In case of log in user will only asked about
first name and last name on the same page user will be able to see login sign up and
forgot password option. There will also a check box “remember me” right after last
name option. The minimum length for password will be 6.
 Content Creation and Publishing:
 User (Readers/writers) should be able to create, edit, and publish articles using a rich
text editor.
 The platform should support the embedding of multimedia content such as images.
 Interactivity and Engagement:
 User (Readers/writers) should be able to engage with articles by liking, commenting,
and sharing them.
 Authors should have the ability to respond to comments and interact with their readers.

 Non-functional Requirements:

 Performance:
 This platform can provide fast load time and response rates, even during peak
usage periods.
 Pages should be optimized for performance to minimize loading times.
 Security:
  Encryption of sensitive data such as readers'/writers' credentials and personal
information. This website can protect against common web vulnerabilities like
cross-site scripting (XSS) and SQL injection.
 Scalability:
 This platform should be able to handle a large number of concurrent
readers/writers and growing database articles.
 It should scale to accommodate increased traffic and readers/writers activity
 Reliability:
 It Minimal downtime to ensure the availability and reliability of the blog
platform. Regular backups of the content to prevent data loss.
 Usability User (Readers/writers) experience:
 Intuitive readers/writers interface design for easy navigation and content
consumption.
 It should prioritize readability and visual appeal to enhance the overall
readers'/writers' experience.
 Compatibility:
 Mobile responsiveness for optimal viewing on various devices such as
smartphones and tablets.

 Designing :

 This phase occurs after the requirements gathering and analysis phase and
before the implementation or coding phase. The primary goal of the designing
phase is to create a blueprint or roadmap for the development team to follow
during the actual implementation of the software.

 System Architecture design:

 Define the overall structure of the system based on the MVC (Model-View-
Controller) model.
 Identify components such as models (e.g., article, user, like, comment),
controllers (e.g., article controller, like controller), and views (e.g., articles,
comments, layout).
 System architecture design refers to the process of defining the overall structure,
components, modules, and interactions of the software system that powers the
 blog article writing application. Here are key aspects of system architecture
design in this context.
 Component design Designing the various components that make up the
application, such as user management, content management, commenting
system, search functionality, and social sharing features.

 User interface design:

 User interface design focuses on creating an intuitive, visually appealing, and
user-friendly interface for the blog article writing application. It encompasses the
design of elements that users interact with directly.
 Design an intuitive and user-friendly interface for readers and writers, including
features for account registration, article creation, liking, commenting, and
searching.
 Create wireframes and prototypes to visualize the user interface layout and
navigation flow.

 Wireframes:
 Wireframes are visual representations or blueprints that outline the basic
structure, layout, and functionality of a user interface (UI) or a web application.
They are typically created during the early stages of the design process to
provide a clear and simplified view of how the final product will look and
function. Wireframes clarify the placement of key elements such as navigation
menus, content sections, forms, buttons, and more. Wireframes serve as a
communication tool between designers and developers.
 In this, firstly the login page is shown. If the user already have an account then user will
do log in and if the user dos not have an account before then the user gone to sign up
option and give the information that shown in the picture and made an account.
 When user successfully log in then the articles will be shown with the author name ,
date of publish and the title of the article. The user will be able to read these articles
and also create article.
 The user also like the article, comment the article, reply , report and suggestion. And if
the writer want to update the article then there is an option of edit.
 UML Diagrams:
 In the designing phase of a project, it is common practice to include UML
(Unified Modeling Language) diagrams in the documentation. UML diagrams are
graphical representations that help in visualizing, specifying, constructing, and
documenting the different aspects of the system being designed. They are
especially useful for communicating the system's architecture, design patterns,
relationships between components, and behavior models. This helps in the
coding.

Use case Diagram:

 Activity Diagram:

yes

Log
in
Class Diagram: