The document is an internship report describing the development of multiple websites using PHP and HTML. It includes site maps and descriptions of 3 websites developed - Chithrakoota Ayurveda, Mahodati Infotech, and a hotel booking website still in development called Hotel Beena. For each site, the report outlines the pages developed and how PHP, HTML, CSS, and JavaScript were used to build the sites. It also includes details on database design and testing of the webpages.
The document is an internship report describing the development of multiple websites using PHP and HTML. It includes site maps and descriptions of 3 websites developed - Chithrakoota Ayurveda, Mahodati Infotech, and a hotel booking website still in development called Hotel Beena. For each site, the report outlines the pages developed and how PHP, HTML, CSS, and JavaScript were used to build the sites. It also includes details on database design and testing of the webpages.
The document is an internship report describing the development of multiple websites using PHP and HTML. It includes site maps and descriptions of 3 websites developed - Chithrakoota Ayurveda, Mahodati Infotech, and a hotel booking website still in development called Hotel Beena. For each site, the report outlines the pages developed and how PHP, HTML, CSS, and JavaScript were used to build the sites. It also includes details on database design and testing of the webpages.
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 1
INTERNSHIP REPORT
WEB DEVELOPMENT USING PHP AND HTML
Report By: DEEPAKA SRIRAMA BAIRY USN: 111011018 Company Guide: ASHISH SHETTY University Guide: BALAJI B
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 2
ACKNOWLEDGEMENT I would like to use this opportunity to express my feelings to all the people for making my project a success. I would like to extend my thanks and gratitude to my Guide at Mahodati Infotech Services Pvt. Ltd., Mr. Ashish Shetty, Managing Director, who provided me with an opportunity to work with such an esteemed organization and for providing me with an opportunity to work in web development and also for his encouragement and support in various ways. I am highly thankful to my internal guide Mr. Balaji.B, Assistant Professor of Manipal Centre for Information Science for all his support and valuable suggestions and feedbacks. I would also like to thank my Branch Manager Mr. Nagaraj K, and the team members of my Project. I would also like to thanks Mr. Ramasheha, Project coordinator Manipal Centre for Information Science, Manipal who guided me to complete the necessary requirements at college for the success of my project. Last but not the least a special vote of thanks to all team members for extending co- operation and support during the course of the project and providing various seminars and guidelines which helped me throughout the project tenure.
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 3
ABSTRACT
This report describes my role in building websites using PHP and HTML. In Mahodati Infotech Carrying out web design and development, software development, E-Publication and data Management. My task in the company is to develop the website using PHP, HTML and Mysql. For this process I use tools such as Dreamweaver, Notepad++, Xxamp server, Mysql and File Zilla. The main reason to use PHP is to make the website simple, flexible and easier to maintain. We developed chithrakoota Ayurveda website and I designed and developed few pages in the website which is described in this report. Then we updated our company websites into new look. The report shows how php and html codes used in the site. Also this report contains about Hotel reservation website which is under development that I explained briefly in this report.
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 4
INDEX CONTENTS PAGE NO. 1. INTRODUCTION 5 1.1 OVERALL DESCRIPTION 5 2. OVERALL PLANNING AND DESIGN 7 2.1 SITE MAP 7 2.1.1 SITE MAP FOR CHITHRAKOOTA AYURVEDA 7 2.1.2 SITE MAP FOR MAHODATI INFOTECH 8 2.1.3 SITE MAP FOR HOTEL BEENA 8 2.2 DATABASE DESIGN 10 3. IMPLEMENTATION 12 3.1 DEVELOPMENT OF AYURVEDA SITE 12 3.1.1 HOME PAGE CREATION 12 3.1.2 CONTACT US PAGE 14 3.2 MAHODATI INFOTECH WEB DEVELOPMENT 17 3.2.1 MAKING OF HOME PAGE 17 3.2.2 OTHER PAGES OF MAHODATI 18 3.3 HOTEL BEENA WEB DEVELOPMENT 24 4. TESTING OF THE WEBPAGE 27 4.1 TESTING OF THE WEBPAGE 27 4.2 PERFORMANCE TEST 27 5. SCRIPTING FOR WEBPAGES 28 5.1 SCRIPTING FOR MAPPING 28 5.2 SCRIPTING FOR BACKGROUND & MOVEMENT OF TEXTS 29 5.3 SCRIPT FOR SLIDE SHOW OF IMAGES 30 5.4 SCRIPT FOR ENQUIRY FORM 31 5.5 SCRIPT FOR SLIDE OF IMAGES IN MAHODATI WEBSITE 33 5.6 PHP SCRIPT FOR CONTACT FORM 35 6. REFERENCES 38
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 5
CHAPTER 1 INTRODUCTION Mahodati Infotech Services Pvt Ltd. is focused on becoming a leading software solutions and Information Technology integration services provider, headquartered in Bengaluru in the India, with regional offices in Kundapura Udupi. The Mahodati Infotech services and solutions are tailored to help companies irrespective of their size become more efficient, profitable and effective in their services delivery. The Mahodati Infotech Service Pvt Ltd. is in designing, building and delivering IT solutions, for small, mid-cap and large-cap clients. Today, information technology is moving away from being a cost center to a tactical investment that is deeply tied to business strategies. Pacer provides its customers with solutions that incorporate best-of-breed IT products and best-practice IT solutions, practiced over years of experience with working with all kinds of customers. The Company core competency lies in enabling organizations to realize the full potential of their IT investments by building business value into technology solutions, and helping them to make the critical connection between IT investments and business outcomes. The Company possess with the latest technology to deliver excellent quality with TAT (turn-around time).
1.1 Overall Description: The aim of this report is to explain the process of designing, building and testing of websites.
The website called chithrakoota Ayurveda and the URL is: http://www.chithrakoota.in/ The Company website which is called Mahodati Infotech and the URL is: http://www.mahodati.com/
And the other website is Hotel Beena which is still under development.
The website Chithrakoota Ayurveda is based on the Ayurveda Hospital and it contains about the organic form, Pharmacy and Images of website etc. The website was built by coding PHP Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 6
(Hypertext Preprocessor), HTML (Hypertext Markup Language), Javascript and CSS (Cascading Style Sheets). I worked on chithrakoota website for designing of the template, embedding the google maps to the website, enquiry form creation, creating the slide show of images for the site, etc. I worked on updating the company website and renewed all the pages with the new look. This website contains Company information, Product Information, Services of the Company, Career pages and Contact the Company pages. The website is developed using PHP, HTML, Javascripts and Cascading style sheets. The other website Hotel Beena is a Hotel Lodging site and it contains about the rooms, Images, and online reservation of the site. The website was built by coding PHP (Hypertext Pre- processor), HTML, JavaScript and CSS. In addition to this database developed in MySQL. This website is still under development. So only few pages which are done are enclosed in this report.
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 7
CHAPTER 2 OVERALL PLAN AND DESIGN 2.1 SITE MAP: The first step after deciding the website is the site map of the project. It describes all the pages of website, link to each pages and database to the site.
2.1.1 SITE MAP FOR CHITHRAKOOTA AYURVEDA The first site map describes the pages, link to the chithrakoota website. According to this site map home page has the connection to every other main pages. And each page has the link that goes back to the home page. Even the main page has the option to goto the other main page without going to the home page.
Fig. 2.1 Chithrakoota Website Site Map
H Ho om me e About US Gallery Facilities Organic form & Herbal Garden Organic form & Herbal garden Facility page Photo Gallery About Chithrakoota More about Organic form & Herbal garden More about Facilities More about chithrakoota Contact US Treatment Tourism Offered Treatments Nearest Places Enquiry form Name
Email
Subject
Message Direction Map Contact Address More about Treatments Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 8
2.1.2 SITE MAP FOR MAHODATI INFOTECH The Mahodati Infotech site map shows the connections to every page. Here in every page it has the link to each page. The home page is the index page which is the main page of the website. Here we have made one set of connections in the horizontal row, i.e. why we are different, how we work, about us and contact us pages and other in vertical i.e. Products, services, clients and career page.
Fig 2.2 Mahodati Infotech site map
2.1.3 SITE MAP FOR HOTEL BEENA The Next figure describes the site map for hotel Beena. In this website the database is required for the website and the database developed using Mysql. Home Why we are Different How we work About us Contact us Products Services Client Career Billing Software Pay role & HRMS Tax Suite School Mgt System Hospital Mgt System CRM Software Development E-Publication Web Design Business App Services HRM Solutions Data Management System & Tech Support
Who we are What we value What we offer Current Openings Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 9
The site map shows the link for each other web pages. When the link goes for booking the checkin date, checkout date and total number of required rooms will goto the server and search for the availability in the database and produces output of available rooms, room type and price per room for the dates which are requested. If the customer does the booking then the information of the guest and number of days staying in the hotel are stored in the database. Then the link goes to the payment options and here we have given it to the paypal account. So once payment is done the room will be blocked to the customer and updates simultaneously in the database.
Fig. 2.3 Hotel Reservation System Site Map The next figure describes admin panel for the hotel Beena. Here the admin has the full options to view the booking report, manage booking, can make changes in the room price, block the rooms, update room types and modify the number of rooms etc. H Ho om me e Gallery Services Restaurant Contact US Booking More photo Gallery About the restaurant shivani veg Room Search Address
Services Page Room Availability Customer details form Payment gateway Booking Confirmation Location map Enquiry Form Name Contact Subject Message Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 10
Fig 2.4 Admin Panel for Hotel Reservation System 2.2 DATABASE DESIGN: The E-R Diagram of Hotel Beena database design represents the number of database tables and rows of the website. Here in the first table Guest, the primary key we have given is LoginID. In the Rooms table the primary key we have given is Number and in the Reservations table we have given is ResNumber. The figure 2.5 describes the E- R diagram for the Hotel Beena website.
Admin Login Admin Home Hotel Details Hotel Manager Booking List Price plan Manager Price Manager Customer Lookup Room & Room Type Manager View booking list Room Blocking Calendar View Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 11
Fig 2.5 E-R Diagram of Hotel beena database design
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 12
CHAPTER 3 IMPLEMENTATION
3.1 DEVELOPMENT OF AYURVEDA SITE:
3.1.1 HOME PAGE CREATION: The design and development of home page is very important in every website. It should attract the user in the first look. Here in the chithrakoota is a ayurvedic website, so to attract the customers easily we have designed the website such a way that by looking at the theme they should come to know it is pure Ayurveda. We have given ancient wooden look for this website. The main attraction of any website is the photos and videos. So here we used slideshow of images of Ayurveda medicines and treatment styles. This theme designed using photoshop, we have collected ancient wood pictures and edited to suite into the website. This work takes long time rather than writing code to it. The below figure 3.1 is the snapshot of the home page of the chithrakoota site. Once the Home page attracts the customer then they look for more pages of a website to find more information. So again we continued with the ancient look for every page. We have developed these pages with the help of dreamweaver and Notepad++. The next figure describes the read more page which continues from Home page, which tells completely about Ayurveda.
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 13
Fig. 3.1 Chithrakoota Ayurveda Home page
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 14
Fig 3.2 Read more page of chithrakoota Ayurveda 3.1.2 CONTACT US PAGE: The next page I developed is the contactus page. In this page I highlighted the Contact person name, address, e -mail and phone number of the person. To make it different from other things I used leaf structure to highlight it. Then I have given link to other pages like enquiry and Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 15
direction map page. In the enquiry page I have given mail sending options for the customer directly to the doctor. The figure 3.3 describes completely about the Contact us and enquiry form.
Fig 3.3 Contact us page. Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 16
In the direction map page I have embedded the google map into the website which I created. Here first I added the hospital place into the google maps then after I took the longitude and latitude of the place. By using the longitude and latitude of the place we can describe where exactly the place comes. The figure 3.4 describes more about the direction map.
Fig. 3.4 Direction map
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 17
3.2 MAHODATI INFOTECH WEB DEVELOPMENT: 3.2.1 MAKING OF HOME PAGE: The Home page is the index page of the website and is the 1 st attraction for any site. So we designed mahodati.com home page very attractive, Informative and simple. The main attraction of the page is the slide show of pictures. So we put the picture slides into centre of the page so that the customer who visits the sites will get the best impression on that. Then we put information about the company which is very informative to the customer. The template we selected for this site is very simple and this contains very less in size so that the browsing to the pages are faster. The figure below represents the index page of the site.
Fig 3.5 Mahodati Index page
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 18
3.2.2 OTHER PAGES OF MAHODATI The next page is the Why we are different page, here it contains slide images and the texts containing the reasons for why the company is different. In the bottom of every page we have given link to facebook, twitter and linkedin accounts. The figure 3.6 shows the why we are different page.
Fig.3.6 why we are different Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 19
The next page is how we work page. It contains how mahodati works and appreciations given by clients. The figure 3.7 represents how we work page.
Fig 3.7 how we work In the pages of mahodati website we have written separate header and footer codes. So by calling header.php and footer.php in any page we can include header and footer. The use of this technique is no need to modify header and footer in every page. The figure 3.8 represents about us page. Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 20
Fig 3.8 about us The next page is the contact us page. In this page the customer can contact the company by submitting form. It contains PHP codes that send email to the company manager. The text box field contains company name, Full name, E-mail Id of the customer, Subject and message body. The figure 3.9 represents contact us page. Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 21
Fig 3.9 Contact us page The next figures 3.10, 3.11 and 3.12 shows about the products of the company, Services of the company and who we are which is related to career page. Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 22
3.10 Products of the company Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 23
Fig 3.11 Services of the company Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 24
Fig 3.12 who we are page
3.3 HOTEL BEENA WEB DEVELOPMENT: The pages of Hotel Beena designing and developing in such a way that tourist should attract to the hotel more quickly than other. We have placed best photos of the hotel that describes the neatness of the hotel and facilities of the hotel. So that the tourist finds this hotel best one than other. The Speciality of this website is I am developing online reservation system to this website, so that the tourist has no tension of finding rooms after coming to the place. Here I am using paypal account for the money transaction process. It is very is easy and secured compare to any other way. Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 25
The figure 3.5 describes the home page of hotel beena. The figure 3.6 describes the Galary page where the tourist finds more photos of the hotel.
Fig 3.13 Hotel beena Home page Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 26
Fig 3.14 Gallery Page
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 27
CHAPTER 4 TESTING OF THE WEBPAGE
4.1 TESTING OF WEBPAGE Once we developed the webpage then we go for testing of web page in any browser. If the webpages looks perfect then we go for testing of links which we have given in the website. If that links works perfect then we try in browser to check is it working same like the previous. We mainly Test the page in Google chrome, Mozilla firefox and Internet explorer as the most of the people uses only these browsers.
4.2 PERFORMANCE TEST In this performance test we use the online free tools for testing the speed of the website. There are lot of free tools available online. We use pingdom tool & kite tool to test the performance of the pages. The figure 4.1 shows a sample snapshot of performance testing of mail.php page of chithrakoota site. Fig 4.1 Performance test Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 28
CHAPTER 5 SCRIPTING FOR WEBPAGES
Although I cannot able to put all the codes I have added few important scripts that I used in my website. That works for the specific tasks in the website. 5.1 SCRIPT FOR MAPPING: <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&s ensor=false"> </script>
<script> var myCenter=new google.maps.LatLng(13.736008,74.746749);
function initialize() { var mapProp = { center:myCenter, zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({ position:myCenter, });
marker.setMap(map); Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 29
$('.ppt li:gt(0)').hide(); $('.ppt li:last').addClass('last'); var cur = $('.ppt li:first');
function animate() { cur.fadeOut(5000); if (cur.attr('class') == 'last') cur = $('.ppt li:first'); else cur = cur.next(); cur.fadeIn(3000); Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 31
5.5 SCRIPT FOR SLIDE OF IMAGES IN MAHODATI WEBSITE <div id="slides"> <div class="slides_container"> <div class="slide"> <a href="y_v_r_diff.php" title="WHY WE ARE DIFFERENT" target="_blank"><img src="img/slide-99.jpg" width="570" height="270" alt="Slide 1"></a> <div class="caption" style="bottom:0"> <p>" INNOVATIVE THINKING FOR GLOBAL PERSPECTIVE "</p> Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 34
<div class="slide"> <a href="products.php" title="OUR PRODUCTS" target="_blank"><img src="img/abtus.jpg" width="570" height="270" alt="Slide 5"></a> <div class="caption"> <p>" DELIVERING BUSINESS SOLUTION WITH TECHNOLOGY "</p> </div> </div> <div class="slide"> Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 35
<a href="service.php" title="OUR SERVICES" target="_blank"> <img src="img/slide- 66.png" width="570" height="270" alt="Slide 6"></a> <div class="caption"> <p>" at SIMPLIFi WE LIKE TO KEEP OUR CUSTOMER hAPPY "</p> </div> </div> <div class="slide"> <a href="career.php" title="CAREER OFFERS" target="_blank"><img src="img/career.jpg" width="570" height="270" alt="Slide 7"></a> <div class="caption"> <p>" EXPLORE YOUR CAPABILITIES WITH US "</p> </div> </div>
<div id="content2"> <h1>Contact Us</h1> <p>Please complete the information below and click 'Submit' to have our representative contact you promptly</p>
Web Development Using PHP and HTML Deepaka Srirama Bairy
Manipal Centre for Information Science, Manipal Page 37
<form id="form1" method="POST" action="#" enctype="multipart/form-data" > Company Name<br> <input size="30" name="compname" type="text"/> <br><br> Full Name<br> <input size="30" name="fullname" id="fullname" type="text"/> <br><br> Email Address<br> <input size="30" name="email" id="email" type="text"/> <br><br> Subject<br> <input size="30" name="sub" id="sub" type="text"> <br><br> How Mahodati can help you<br> <textarea rows="5" cols="30" name="help"></textarea> <br><br>