Full-Stack-Web-Development/C2/Web-hosting-using-Linux-cPanel/English

From Script | Spoken-Tutorial
Jump to: navigation, search
Visual Cue
Narration
Slide 1: Welcome to the Spoken Tutorial on Web hosting using Linux cPanel.
Slide 2:

Learning Objectives

In this tutorial we will learn how to
  • Create an account on 000webhosting
  • Upload the required files in File Manger
  • Create a database in PhpMyAdmin
  • Import the sql files inside the database and
  • Test the hosted website
Slide 3a:

Pre-requisites

Before going ahead, you should do the following setups.
  • Arrange your files in a directory that you want to upload in the web hosting.
  • File names are case sensitive in web hosting.
  • So to avoid any errors, save the files in lower case without any spaces
Slide 3b:

Pre-requisites

* Give proper naming conventions to the files and folders.
  • It will be easy for others to manage.
Slide 4:

About 000WebHost

* 000webhost is a free Web hosting with Cpanel
  • You get 1 GB of disk space
  • It is an easy-to-use website builder.
  • The main feature is that you can run PHP and MySQL from a free account.
Show the files and folders I’ll show a demo on how I have arranged my files and folders.

In my desktop, I have created a directory called covid19_hackathon.

Here, I have saved the required files that I want to upload in web hosting.

All .sql files are saved in the sql folder.

I have a .sql file as table covid participant.

Images are saved under images folder.

I have another folder called ajax, where all php files are saved.

Inside ajax folder, I have a subfolder as app.

In this, I have saved the database connections as db_connection.php.

The html files required for the webpage are in the main folder as shown here.

The main folder covid19_hackathon is compressed as zip file.

This zip file will be uploaded in the File manager of the web hosting.

Slide 5:

Code files:

* The files used in this tutorial are available in the Code Files link on this tutorial page.
  • Please download and extract them
  • Make a copy and then use them while practising.
I’ll show a demo on how to create an account on 000webhost.
Type the link

https://in.000webhost.com/members/website/list

Open the Google chrome web browser.

Type the link as shown.

Enter the username and password

Click on sign in

In the free sign up page, enter a valid email id and password.

Retype the password to confirm.

Click on sign up button

Open the your mail and click on notification mail You will get a notification email from 000webhost.com in your email id.

Open the mail and click on “Click to verify email’ button.

Login with username and password Next, switch back to the web page.

Now login with your username and password.

Click on take me to the panel link. You can see a welcome message.

At the bottom of the window, click on take me to the panel link.

Enter a project name A new page appears where you need to give a project name.

I’ll type covid19-sample1 as project name.

Enter a password. Remember the password for future use.

Click on submit button.

Click on upload your site. A page loaded with three options.

Click on upload your site.

Click on the tab Website list. Click on the tab Website list.
Point to running status We can see the project name that we have created.

Below that the status is shown as running.

This indicates that the website is successfully launched.

Click on manage website Click on manage website on the left side of the page.
click on tools and then file manager On the left panel, click on tools and then file manager.

Click on upload files button.

Point to public_html. We can see a default folder as public_html.

All the files or folders that you want to upload should be under public_html.

Select Public_html.

We will upload the files that are saved locally in our machine to this folder.

Click on upload files icon. On the top right corner, click on upload files.
Click on Select Files button.

Select the zip file

Click on the upload button.

A pop up window opens to upload files.

Click on Select Files button.

Select the zip file from your local machine that you want to upload.

Click on the upload button.

The file is uploaded successfully and now it is available for public to access.

Right click on the file and extract Right click on the file and select extract to extract the zip file.
Type .

Click on Extract.

Click on close button.

The files will be extracted in a sub folder with the given name.

As we don’t want to create a subfolder, type dot in the given text box.

Now click on Extract.

It will extract the files in the current folder itself.

Click on close button.

Point to the files and folders We can see all the files and folders are uploaded successfully.
Next we will see about database manager.
Click on the 000webhost.com mainpage. Click on the 000webhost.com main page.
Click on the tools

Point to database manager

Click on the tools option.

Click on Database manager.

Please read the instructions given under Database manager.

narration We have to create a new database in web hosting.

This is an important step that each user should follow.

Already we have saved sql files required for the project in the local machine.

We need to import the tables and .sql files to the web hosting database.

Click on New Database button Click on New Database button on the top right corner of the page.
Type the database, username and password A Create new database pop up window appears.

In the database name field, type a database name.

I’ll type sample_db.

In the database username field, type a username.

In the password field, enter a password.

Move your mouse pointer to the icon i. Read the tips given to create a valid password.

Password must be longer than 12 characters.

It should include upper case, special character and number.

Remember to save the above details in a notepad for future use.

Click on the create button Click on the create button at the bottom right of the window.
Point to the message We can see “creating database” message.

Wait until the creation process is completed.

Notice that some random number is generated with the username and database name.

Make a note of it.

click on the Manage button. Next click on the Manage button.

In the drop down menu, click on PhpMyAdmin

click on the database name On the left panel, click on the database name that we have created.
Click on the import Click on the import option on the top menu bar.
Click on the Choose file button.

click on the go button

Click on the Choose file button.

Browse your computer and select the files which you want to import.

Scroll down and click on the go button at the left bottom of the page

Point to the .sql files We can see sql file is imported in the database.

Likewise you have to import all your sql files inside the database.

Click on the table name Let us check the data in the imported table.

Click on the table name. On the right side, we can see the records of this table.

These are the records which I have inserted in my local table.

So data gets imported along with the table structure.

Click on My Sites Go to the main page and click on My Sites on the top left corner.
Click on the domain name In the Manage website, below the status:runnning message, we can see a URL .

This is the free main domain name given by the webhosting.

Click on that link.

Next we will test the working of the hosted website.
Type /covid19_hackathon In the address bar, type forward slash and the main folder name.

In my case, it is covid19_hackathon. Press Enter.

We can see the index of the main folder.

Click on add_participant.html.


Click on addparticipant.html

We can see the output of the html page.

Before entering the data we need to check the db_connection.php file.

Click on File manger. Go to the File manger.

Go to db_connection.php file in the app folder under ajax.

Right click on the db_connection.php and select Edit.

Point to database name, username and password.

Click on Save and close

Please check the database name, username and password.

db_connection.php should have the name that is generated by web hosting.

Recall that in web hosting, we have created a new database.

It will give error if you give the connection details of your local machine settings.

Now, Save and close the file.

Click on addParticipant.html Click on addParticipant.html

Enter the data in the form.

Click on submit button.

We can see a success message.

Click on allparticipant.html . Go back to the index page.

Click on allparticipant.html .

We can see the newly added record gets inserted in the table.

Like this you can test the working of your files in webhosting.

Point to filepath You may get errors if you don’t specify the file path correctly.

Make sure that you have entered the exact filename with capital letter, underscore etc.,

With this we come to the end of this tutorial.

Let us summarize.

Slide:6

summary

In this tutorial we learnt to
  • Create an account on 000webhosting
  • Upload the required files in File Manger
  • Create a database in PhpMyAdmin
  • Import the sql files inside the database and
  • Test the hosted website
Slide 7:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

Slide 8:

Spoken Tutorial workshops

The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

Slide 9:

Acknowledgement

Spoken Tutorial project is funded by MHRD, Government of India.
This is Nirmala Venkat from Spoken Tutorial project, IIT Bombay, signing off.

Thanks for watching.

Contributors and Content Editors

Nirmala Venkat