Project Report
Product Name / Advanced Certificate in Web DevelopmentQualification Name (NICF) / Advanced Certificate in Software Applications (Development and Deployment)
Product Name / Web Development Basics
Module Name (NICF) / NICF Web Development Basics
Student name / Assessor name
Date issued / Completion date / Submitted on
Project title / Student Registration Form Development
Learner declaration
I certify that the work submitted for this assignment is my own and research sources are fully acknowledged.
Student signature: Date:
Content
1. Project background 1
2. Project Objectives 2
3. Requirement Specifications 3
4. Task 1 4
5. Task 2 5
6. Task 3 6
7. Task 4 7
8. Task 5 8
9. Task 6 9
10. Task 7 10
11. Task 8 11
12. Task 9 12
13. Task 10 13
14. Task 11 14
15. Task 12 15
16. Task 13 16
17. Task 14 17
18. Task 15 18
19. Task 16 19
20. Task 17 20
Project Background
To demonstrate the application of the following knowledge learnt
● Data analysis
● Use of Html, javascript, css, dsn, mysql-python interface for front end design
● Use of Python and Mysql for backend design
● Use of phpmysql and sql for database and record creation
Project Objective
Project description of project paper
To develop a Student Registration Form capturing the following fields –
1. Student First Name (Input type = Text box )
2. Student Last Name (Input type = Text box )
3. Residential Address (Input type = Text box )
4. Phone No (Input type = Text box)
5. Gender (Input type = Option button )
6. Course (Input type = List box )
Tools & platform used
− Front end : HTML, javascript, CSS, mysql-python interface
− Web server : Apache
− Back end : Python, MySql
− Tools used : Use of phpmysql, sql for database and data creation
Use of Filezilla to transfer files from local to projects environment
TextPad for source code editing,
Chrome Developer Tools for front-end debugging
Task 1
Task 2
Task Statement:
Design a HTML form that will have all elements as per requirement specification. Also add two buttons as ‘Save’ for saving the information entered by user in database and ‘Clear’ to clear content on the HTML form.
Solution:
Following image shows the design of HTML form as per the pre-defined requirement:
Task 3
Create Database ‘qishengandy’
Task requirement is too vague yet again.
Task 4
Task Statement
Create following tables
Solution
Sql and screen shots
CREATE TABLE CourseMaster(
Course_Id VARCHAR( 10 ) ,
Course_Name VARCHAR( 50 )
)
CREATE TABLE StudentMaster(
Student_Id VARCHAR( 10 ) ,
Student_Name VARCHAR( 50 ) ,
Course_Id VARCHAR( 10 ) ,
Gender VARCHAR( 10 )
)
insert into coursemaster(course_id,course_name)
values("C0001","Std VII")
insert into coursemaster(course_id,course_name)
values("C0002","Std VIII")
insert into coursemaster(course_id,course_name)
values("C0003","Std IX")
insert into coursemaster(course_id,course_name)
values("C0004","Std X")
Task 5
Task Statement
Now check, if ‘StudentMaster’ table has sufficient fields to capture the complete student details. If
NO then re-design the ‘StudentMaster’ table so that all required fields are captured.
Solved in task 6 and 7 isnt it?
Task 6
Task Statement:
The following fields need to be modified / added:
Solution
ALTER TABLE `studentmaster` CHANGE `Student_Name` `Student_FirstName` VARCHAR( 50 )
AlTER TABLE ‘studentmaster’ ADD ‘Student_LastName’ Varchar(50)’
AlTER TABLE ‘studentmaster’ ADD ‘Residential_Address’ Varchar(256)’
AlTER TABLE ‘studentmaster’ ADD ‘PhoneNo(11)’
Task 7
Task Statement
Maintain database integrity by making the Course_Id Student Master Foreign Key referring to
Primary Key in Course_Master
Solution
Sql and screen shot
ALTER TABLE studentmaster
ADD PRIMARY KEY (Student_Id)
ALTER TABLE coursemaster
ADD PRIMARY KEY (Course_Id)
ALTER TABLE studentmaster
ADD FOREIGN KEY (Course_Id) REFERENCES coursemaster(Course_Id);
- Task 8
Task Statement
There are 2 Choices for Connecting to Database, One is pyodbc (Connect through dsn) Another is
MySQLDB.
a. Create a DSN and connect using your application to check the connectivity through ODBC DSN.
b. For the current application you should use MySQLDB driver.
Solution
Screen shot of creation and results, scripts to test
- Task 9
Task Statement
Using Python, connect <database name> database with your HTML application
Solution
Show the part of python script that is used to connect.
Task 10
Task Statement
Populate data from ‘CourseMaster’ table ‘Course’ listbox in HTML form
Solution
Show the script that does that
- Task 11
Task Statement
Using Python and MySQL, write code for saving student details in ‘StudentMaster’ table on click on
‘Save’ button.Test Case 1 and Results
Solution
first name : Adam
last name : Jenson
residential address: somwhere on earth
Phone No: 123456
Gender : Male
Course : STDVII (aka c0001)
- Task 12
Task Statement:
Write following validations at the time of saving student details –
a. First Name should not be blank
b. Last Name should not be blank
c. Phone No should be a numeric value of length not more than 11 characters
Solution
var fname = document.forms["testform"]["first_name"].value;
if (fname == "")
{
document.getElementById("err_firstname").innerHTML =
"Enter a Valid First Name";
successForm = false;
}
else
{
document.getElementById("err_firstname").innerHTML = "";
}
var lname = document.forms["testform"]["last_name"].value;
if (lname == "")
{
document.getElementById("err_lastname").innerHTML =
"Enter a Valid First Name";
successForm = false;
}
else
{
document.getElementById("err_lastname").innerHTML = "";
}
var phoneNum = document.forms["testform"]["phone_number"].value;
if (phoneNum.length > 11)
{
document.getElementById("err_phonenumber").innerHTML =
"Enter a Phone number max 11 characters";
successForm = false;
}
else
{
document.getElementById("err_phonenumber").innerHTML = "";
}
- Task 13
Task Statement:
a. Test the application for desired output and make changes if required
b. Do a Test Case and Check the Input data is saved in MySQL by doing a select query in phpMyAdmin
Solution:
Test case for valid and invalid input, sql.
Valid Input test:
● Fill the form without filling in mandatory fields
● Fill in all fields.
Invalid input test:
● Leave a mandatory field blank and attempt submit
● attempt to enter a phone number with characters
- Task 14
Task Statement:
- Deploy to Server in a Created Database and Python Script in required folder. The Database Name with be your <Their User Name>. Connect using phpMyAdmin
b. Use FileZilla to connect to server using FTP, and upload the Python Source Codes
Solution:
Screen shots
- Task 15
Task Statement:
Prepare a detailed Technical specification document and user manual for the application.
Required Technical Environment
● Apache with Python
● MySQLDB Driver
● Text editor
● MySQL
● phpMyAdmin
User needs to setup and install the above listed programs.
Copy the python file to the folder where the url is hosting. eg htdocs or VM assigned folder.
open the python file where you can access it through a browser.
- Task 16
Task Statement:
a. Create 2 virtual host in your apache called www.lithantest1.com and www.lithantest2.com
b. Configure host file in c:\windows\system32\drivers\etc to point 127.0.0.1 to
www.lithantest1.com and www.lithantest2.com
c. Create 2 html files index.htm with different contents. Place one of them in document root of www.lithantest1.com and the other in document root of www.lithantest2.com
d. Access www.lithantest1.com and www.lithantest2.com from browser. The different contents captured by the two html files should be displayed respectively.
- Task 17
Task Statement:
Secure the document root of www.lithantest1.com using Apache security so that user name and
password will be prompted when it is being accessed.