IT8078 - WEB DESIGN AND MANAGEMENT

UNIT V
PROJECT CASE STUDY
Using HTML, CSS, JS or using Opensource CMS like Wordpress, design and develop a Website
having Aesthetics, Advanced and Minimal UI Transitions based on the project - Host and manage
the project live in any public hosting.

CONTENT MANAGEMENT SYSTEM

A content management system, often abbreviated as CMS, is software that helps users create, manage,
and modify content on a website without the need for specialized technical knowledge.
In simpler language, a content management system is a tool that helps you build a website
without needing to write all the code from scratch (or even know how to code at all).
Instead of building your own system for creating web pages, storing images, and other functions,
the content management system handles all that basic infrastructure stuff for you so that you can focus
on more forward-facing parts of your website.
What Are Examples of Popular Content Management Systems?
WordPress, is the best example of a popular content management system. While there are certainly other
content management systems in existence, WordPress maintains over a 65.1% market share on websites
with a known content management system.
Note that when we mention “WordPress”, we’re not talking about WordPress.com. Instead, we’re
focused on WordPress.org, which is the website where the actual open-source WordPress content
management system is stored.
Beyond the self-hosted WordPress software, other popular content management systems include:
 Joomla
 Drupal
 Magento (for eCommerce stores)
 Squarespace
 Wix
 TYPO3
What Kinds of Websites Can You Build with Those Content Management Systems?
Most content management systems are pretty flexible nowadays. While there are some that focus on a
specific use – like Magento and eCommerce – most of the popular content management systems can be
used to create essentially any type of website.
For example, you can use WordPress to power:
 Static websites
 Blogs
 eCommerce stores

Department of Information Technology, Panimalar Engineering College, Chennai.

1
 IT8078 - WEB DESIGN AND MANAGEMENT

 Forums
 Social networks
 Online courses
 Membership sites
 Portfolios etc.,
How to Build a Website with a Content Management System?
1. Purchase web hosting and a domain name
2. Install your content management system of choice on your web server
3. Configure the content management system to dictate how your site looks and functions
4. Start writing content using the content management system’s interface
WordPress

WordPress is a free and open-source Content Management System (CMS). It is an online site based on
PHP and MySQL. It was mainly designed as a blogging tool but now it has evolved into a versatile
CMS. Where, you can use it to create a simple blog as well as a fully operationable website and mobile
applications. It is even used to create an online store using some WordPress plugins.
But some people still misunderstand it just as a blogging platform.
It is considered as the easiest and most popular CMS tool due to its features. The main feature of
WordPress is its versatility and feasibility to use. There is no use of coding and designing skills for
creating a website on this. Even a non-technical person can also create a website with the help of
WordPress easily.
WordPress is an open-source community that implies thousands of people from all over the world work
on it. It is free software. You are free to download, install, modify and use it. Although, there might be
some cost involved during web hosting.
There are more than 26,000 themes and 31,000 plugins to create a website.
Features:
1. Creating a website without logical skill

Department of Information Technology, Panimalar Engineering College, Chennai.

2
 IT8078 - WEB DESIGN AND MANAGEMENT

The most interesting and best part about WordPress is that anyone can create his/her own website on
this without any coding or designing skills. Out of million users on WordPress, most of them are neither
designers nor programmers.
To create a website on WordPress you only need an Internet connection and a web browser.
2. Provide a range of Themes
It gives thousand types of template options to give any type of feel and look to a website. They are very
easy to customize as they come with their own option panel which allows users to select colors,
background, sliders, fonts, logos and many more.
3. Plugins to add functionality
It provides both free and premium types of plugins. These plugins add extra functionality or may give a
whole new platform to a website. It allows a user to add photo galleries, shopping carts and much more.
4. Free and Open-source platform
WordPress is a free and open-source software. It is free to install and use. As a new user you can easily
create a website of your own that too absolutely free. It never has any type of hidden charges once a
user started using it.
Being an open-source, you can alter the source-code according to your need. Anyone can become a
contributor to WordPress by answering questions, creating themes or writing plugins.
5. Adding a blog is very easy
WordPress came into existence with blogging and still mostly consider it as a blogging site. It provides
all type of blog solutions from designing, styling to the anti spam solutions. It will meet your demands
in all possible ways.
6. More secure
It only takes 5 minutes to install, and is really fast in updating for security and new functionality.
Upgrading to a new version is automatic and very fast as it provides a one link click upgradation. It
constantly updates its site and software to prevent from hacking.
7. Google and WordPress
In a press conference in 2009, Matt Cutts, the head of Google's web spam team said that "Google loves
WordPress". Even WordPress simple plugins and themes are also really attractive to Google. WordPress
is a better option when doing SEO (Search Engine Optimization) due to its framework which is easy to
crawl.
8. Inserting Multimedia
A user whether writing a blog or creating a website, need to insert videos, pictures to make its content
more powerful. WordPress makes it very easy to upload a multimedia file or to make some editing in
files like images.

Department of Information Technology, Panimalar Engineering College, Chennai.

3
 IT8078 - WEB DESIGN AND MANAGEMENT

9. Mobile-Friendly
A website needs to be responsive for small screens like tablets, smartphones to reach all its users.
WordPress is mobile-friendly as its themes are made responsive.
10. Easy to use
WordPress dashboard always look the same. You don't need to hire an expert to learn how to use
WordPress.

WordPress.com vs WordPress.org
Both the sites are part of WordPress. Only difference is about "who is hosting your website".

Installing WordPress
Installing WordPress is very easy and takes less than five minutes to complete. It is best known for its
ease of installation. All web hosting companies allow WordPress installation within few clicks.
https://wordpress.org/download/
Methods to install WordPress

Department of Information Technology, Panimalar Engineering College, Chennai.

4
 IT8078 - WEB DESIGN AND MANAGEMENT

There are different methods to install WordPress on a system.

Using cPanel
This is the fastest and easiest way to install WordPress on your system using cPanel software. The most
common tools available to automatically install WordPress are Softaculous, SimpleScripts, Fantastico
and De Luxe. All the web hosts allow one-click installation through these tools.
You only have to choose one WordPress host and use installation script in cPanel. You will get your
login details and URL link of cPanel via email after signing up for hosting plan.
Using MS Webmatrix
There is a free software program named Microsoft Webmatrix which allows WordPress installation on
local system. But this installation is only for Microsoft users.
This software creates a local server, database and everything else needed for the WordPress installation
on the system itself and hence, it doesn't need any live server.
After installation through this method you can easily switch to live web server after choosing a web
host.
On local server
To install WordPress on local server you can use software like XAMPP, WAMP and MAMP (for Mac
users). These software provide you a server generally Apache, database MySQL on PhpMyAdmin
which is required for the installation.
Here, you only have to create a WordPress database using PhpMyAdmin and edit wp config file.

Installing WordPess on local server

WordPress can be installed using local servers like XAMPP, WAMPP, etc. We’ll assume that your
system already has installed a local server.
We have XAMPP server installed in our system. Now, we’ll see the installation of WordPress.
Creating Database
Open phpmyadmin from the XAMPP server control panel. Here, at the top you can see
option Databases. Select it.

Department of Information Technology, Panimalar Engineering College, Chennai.

5
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, click on the Databases above to create a database. You'll be directed to the
next window.

Look at the above snapshot, you have to create a database to connect with your WordPress. You can
name it anything. Here, we have named it as wordpress. Write the database name and click on Create.
Download and Install WordPress
First you have to download the latest version of WordPress from the official WordPress
site www.wordpress.org in your system.
WordPress will be downloaded in zipped format. This WordPress zipped folder has to be placed in
XAMPP folder C:/xampp/htdocs
Unzip the WordPress folder here and name it anything. Here, we have named it as wordpress.

Department of Information Technology, Panimalar Engineering College, Chennai.

6
 IT8078 - WEB DESIGN AND MANAGEMENT

Open the created wordpress folder. In the folder, find the file wp-config-sample.php file and rename it
as wp-config.php file. Scroll down the file untill line number 23 as shown in the below snapshot.

These lines define the login credentials for your database.

Replace "database_name_here" with your database name. In our case it is "wordpress".
Replace "username _here" with your "root".
"password_here" field will remain blank.
Save and close the file.
Now, open your browser and go to http://localhost/wordpress/
Here, wordpress is the folder name of unzipped WordPress file.

Department of Information Technology, Panimalar Engineering College, Chennai.

7
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, select your language and click the Continue button.
You'll be directed to the following page.

Department of Information Technology, Panimalar Engineering College, Chennai.

8
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, you have to fill all the details in the fields above and then click Install
button.
That's all, you have installed WordPress.

If all the above processes are done correctly then you’ll be successfully logged in the WordPress as
shown in the above snapshot.
WordPress Dashboard
WordPress Dashboard allows full access to manage a website behind the scenes. It is the default page
in admin panel which comes right after the login page. It mainly represents everything that is happening
with your blog. You can check everything here related to your post. It gives you the updates about your
website. If you want to change your password or change any type of setting this is the place where you
need to come.
All the content of dashboard is grouped into widgets. You can be hide/show these widgets as per your
requirement. Their positions can also be changed using drag and drop action.

Department of Information Technology, Panimalar Engineering College, Chennai.

9
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, this is the login page for WordPress. After filling information click on Log
In button, you will be directed to Dashboard screen which is shown below.

The above snapshot is the dashboard of WordPress.

Admin Bar

Department of Information Technology, Panimalar Engineering College, Chennai.

10
 IT8078 - WEB DESIGN AND MANAGEMENT

The black bar at the top represents admin bar. It only displays when admin is logged in. That's why this
is called admin bar.

Look at the above snapshot, this is the admin bar displayed at our account.
It contains the following items:
A WordPress icon - It contains information about WordPress, WordPress.org, documentation, etc.
Home of your site - It brings you to the Home page of your site
Notifications - All the notifications will be shown here. We have 5 notifications here.
Comments - Display comments on your blog where you can edit, reply or delete a comment.
New - You can add up a new page, post, media or user.
Admin name - It is displayed at the right end of the admin bar showing logged in user name (currently
logged in user name is JTP). You can edit your profile and Logout from here.
Sidebar Menu

Department of Information Technology, Panimalar Engineering College, Chennai.

11
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, it is the side menu of the dashboard which contains full menu of options.
These options allow easy access to different areas of your site.
A sub-menu list may appear on selecting an option. Like here we have shown sub-menu list of
Appearance.
Menu content:
Dashboard - Display received updates
Posts - Manage posts on your blog
Media - Manage media content library like images, audio and video
Pages - creating and managing pages
Comments - display all the comments on your blog
Appearance - change the appearance of your site
Plugins - extend capabilities of the website and manage them
Users - shows all your site's users. Allows editing your site by changing password and name
Tools - setting of website

Welcome to WordPress

This is displayed at the top middle of the dashboard. There is a button to customize your site using
different themes. It contains different links to create blog, view your site and many more as shown
above.
There is an option at the top right corner to remove this widget. If you want to remove it you can. But if
you want it back, click on screen options drop-down menu.

At a Glance

Department of Information Technology, Panimalar Engineering College, Chennai.

12
 IT8078 - WEB DESIGN AND MANAGEMENT

You can have a look on how many posts, pages and comments are there in your site. These comments
also include spammed comments. It tells about which theme is currently running on your site.
It also tells about some additional information if some plugins are installed.

Activity
This widget provides you information about some of your recent posts. It displays the recent comment
on your post.

Look at the above snapshot, there is one recent comment in our activity widget.
On doing hover with mouse at a comment, different actions appear below the comment like editing,
deleting, replying, etc.

Department of Information Technology, Panimalar Engineering College, Chennai.

13
 IT8078 - WEB DESIGN AND MANAGEMENT

Quick Draft

Quick draft widget is a way through which you can write your ideas and save it in a draft form. Later
you can write a blog on it.

Screen Options

As you already know each of the widget can be enabled and disabled in your dashboard area. To do so,
there is Screen Options widget which allows you to enable or disable different widgets.

WordPress News

Department of Information Technology, Panimalar Engineering College, Chennai.

14
 IT8078 - WEB DESIGN AND MANAGEMENT

This widget displays latest blog posts from the WordPress official blogs. Look at the top right corner if
you'll click on this arrow, this widget will hide.

How to create a WordPress website

Creating a site on WordPress is very easy. WordPress is designed in such a way that even non-tech users
can also design their own websites easily and attractively.
Here, we'll discuss each and every step involved in creating a WordPress site.
 Selecting a right platform
 Choosing a domain name and host
 Choosing a theme/template
 Creating new pages
 Adding Content
 Adding Media
 Installing plugins

Selecting a right platform

First you have to decide a suitable platform to build your website with. Here platform means either you
want to create your website using HTML, CSS or using a CMS (Content Management Systems).
There are various popular CMS in the market like WordPress, Drupal, Joomla, DotNetNuke, etc.

Department of Information Technology, Panimalar Engineering College, Chennai.

15
 IT8078 - WEB DESIGN AND MANAGEMENT

Why choosing WordPress

For a beginner WordPress will be the best as it doesn't need any technical skills and due to its flexibility
it is suited for all type of users.
You'll get a lot of options to select a theme as a wide range of community design themes for WordPress.
It can handle any type of website whether large or small. Most known websites like CNN, NASA, eBay
use WordPress.
Above all, it gives you a responsive site which makes it compatible with small screen devices like mobile
phones and tablets.

Choosing a domain name and host

You need a domain name and a hosting space to get your website online.
Domain name enables you to give your site your own name while hosting gives a space to your site on
a server which makes sure your website loads quickly and won't go down for hours.
Domain name should be short and easy to remember, brand able and catchy which defines your business.
Choosing a domain name is not easy with fulfilling all the criteria as million of domain names are active.

Choosing a theme/template
After installing WordPress, a site appears very plain. To make it more attractive, users install best
suitable themes for their site. It adds visuals and views to the front page.
First of all, login to your WordPress site. By default, first screen will be your dashboard.

Department of Information Technology, Panimalar Engineering College, Chennai.

16
 IT8078 - WEB DESIGN AND MANAGEMENT

Accessing Free themes

After login, you'll get access for 150 free themes.

Look at the above snapshot, to look at the free themes, got the side bar menu of your dashboard,
select Appearance >Themes.
Below screen will appear including all the installed themes.

Department of Information Technology, Panimalar Engineering College, Chennai.

17
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, if you want to install more themes click on Add New button above and
install it.
To install a theme, click on Install followed by Activate button.

Creating new pages

Look at the above snapshot, go the sidebar menu, click Pages > Add New option.

Adding Content

Department of Information Technology, Panimalar Engineering College, Chennai.

18
 IT8078 - WEB DESIGN AND MANAGEMENT

Adding new post

At the end we all will come to this point to make our site popular. We need to post different things to
increase the popularity of our site.

Clicking on Post > Add New option, the above page will appear on the screen.

Department of Information Technology, Panimalar Engineering College, Chennai.

19
 IT8078 - WEB DESIGN AND MANAGEMENT

There are two ways to write a post, either you may write in Visual editor or in Text editor (in HTML
format). Currently this snapshot is of Text editor.
Adding Categories
You can divide your content in different categories by adding categories to them. This tool is handy
when you are publishing content for more than one field.

Click on Posts > Categories, you will be directed to the above page.
Here, in Name add a title to your new category. In Slug, you can add some words which will become
part of URL while searching.
Tags
Tags are very much similar to Categories with only one difference that each post has its own set of tags.
Enabling or Disabling Comment
Comment creates a debate on some posts or sites. Some users don't want their visitors to comment. They
can shut comment off in WordPress.
To disable a comment for a particular page
Go to Pages > Add New
Click on Screen Options on top right
Tick on Discussions box
Scroll down, untick Allow Comments option
To disable a comment by default

Department of Information Technology, Panimalar Engineering College, Chennai.

20
 IT8078 - WEB DESIGN AND MANAGEMENT

Go to Settings > Discussions

Untick "Allow people to post comments on new articles"
Editing sidebar
Sidebar which generally appears on the right side (sometimes appears on left) contains widgets like
Archives, Categories and Meta, etc.
To edit the side bar, go to Appearance > Widgets
Use drag n drop method to either use a widget or remove a widget.
Adding Media

Every website needs some photos and videos to describe its content and value. WordPress also provide
functionality to add a media. You can add image caption, title and description along with media. Also
add alt text helps search engine to identify the image.

Department of Information Technology, Panimalar Engineering College, Chennai.

21
 IT8078 - WEB DESIGN AND MANAGEMENT

Installing plugins
Plugins are the extensions in the WordPress with certain piece of coding expanding specific function to
you site. They are not built-in.
There are almost 25,000 different plugins options to choose from.
Installation a plugin is very simple. Click Plugins. You will see three options, as shown in the snapshot
below.

Click on Plugins > Add New. Following screen will appear in front of you.

You can choose a plugin from the given options. Just click Install Now and you will be able to use it.

Department of Information Technology, Panimalar Engineering College, Chennai.

22
 IT8078 - WEB DESIGN AND MANAGEMENT

WordPress Pages
Pages are different from Posts. They are static and they do not change often. Some examples of pages
are About, Contact, etc. you can add pages containing information about you and your site.

How to Add New Page

Go to Pages > Add New

Look at the above snapshot, this is the editorial page where you can give a title and content to your page.

Department of Information Technology, Panimalar Engineering College, Chennai.

23
 IT8078 - WEB DESIGN AND MANAGEMENT

Here you can upload media, write content, add a title to your page. Click on Publish button once you
have completed the page.

How to Edit Page

To edit page, go to Pages > Add New

Look at the above snapshot, this is the list of all the created posts. Bring your mouse above a post,
following options will appear.
There are two options to edit. One is Edit and other one is Quick Edit.
On clicking Edit, following page will appear.

Look at the above snapshot, here you can edit title or content of your post.
On clicking Quick Edit, following page will appear.

Department of Information Technology, Panimalar Engineering College, Chennai.

24
 IT8078 - WEB DESIGN AND MANAGEMENT

Look at the above snapshot, here you can edit title, date and slug of your post. And if want, you can also
change category for your post.

How to Delete a Page

To delete a post, go to Posts > All Pages

Look at the above snapshot, Trash option will let you delete the respective post.

HOST AND MANAGE THE PROJECT LIVE IN ANY PUBLIC HOSTING:

A Website for Web Design and Management course has been created and hosted in netlify.com with
Domain Name URL: https://it8078wdm.netlify.app/

Department of Information Technology, Panimalar Engineering College, Chennai.

25
 IT8078 - WEB DESIGN AND MANAGEMENT

Department of Information Technology, Panimalar Engineering College, Chennai.

26
 IT8078 - WEB DESIGN AND MANAGEMENT

Hosting in Netlify:
Login with G-mail Account:

Configuring Domain Name:

Department of Information Technology, Panimalar Engineering College, Chennai.

27
 IT8078 - WEB DESIGN AND MANAGEMENT

Uploading Webpages:

Department of Information Technology, Panimalar Engineering College, Chennai.

28
 IT8078 - WEB DESIGN AND MANAGEMENT

Department of Information Technology, Panimalar Engineering College, Chennai.

29