Wednesday, June 25, 2014

MAKE COMPLETE WEBSITE IN 3 HOURS PART 3

MAKE COMPLETE WEBSITE IN 3 HOURS PART 3

PART 3: ADDING CONTENTS TO WEBPAGE & MAKING PORTABLE DATABASE SCRIPT
PART 4: CONNECTING AND GETTING DATA FROM DB
PART 5: REGISTER DOMAIN AND UPLOAD TO SERVER
PART6 : EARN MONEY ONLINE/FROM OUR OWN WEBSITE
PART 7: FEW MORE THINGS AND LATEST WEB TECHNOLOGIES

Hello Guys as some of frens are requesting I am again here with new part of my old tutorial series . Here i'll continue With my 3rd part of HOW TO MAKE UR WEBSITE IN 3 hours ,,,

 In this part i'll discuss how to embed database and other content to our website Lets start .Till now We have just amde a dummy website . This website is nothing , just a simple Homepage , Now in this part i'll show you how to add other contents . For example- till now , if we click our navigation menu it did nothing ,But now we are gonna make it actually working . How to do it ?  lets start .

 In this tutorial i'll show ,,, how to load list of hotels and their information from mysql database to our page while clicking hotels link .

 PART 1) SEtting up environment

 step 1) change the name of index.html to index.php .
step 2) install wamp and run it .
step 3) Copy all these downloaded files of demo.zip to /wamp/www location and extract there . 
step 4) Now go to browser and text the site as 127.0.0.1/demo 
step 5) If u see website working then we can move into part 2.

 PART 2) BEIng ready for inserting contents

 Go to index.php and change the code of navigation menu as below... In the anchor field link the reference to actual page which u wanna link like , in href of about us link about_us.php , in gallery - gallery.php and so on.

 <div class="nav">

 <ul>
<li> <a href="index.php"> Home</a> </li>

 <li><a href="destination.php"> Destinations </a>
</li>
<li> <a href="hotels.php">Hotels</a>
</li>
<li> <a href="gallery.php">Gallery</a>
<ul>
<li><a href="gallery.php/?place=valley"> VAlley</a></li>
<li> <a href="gallery.php/?place=himalaya">Himalaya</a> </li>
<li> <a href="gallery.php/?place=pokhara">Pokhara</a> </li>
</ul>
</li>
<li> <a href="about_us.php">About Us</a>
</li>
</ul>
</div>

 and yeslai save gara ..

 PART 2) Making subpages for content 

To make subpage we just have to copy our main index page and pasting it and renaming it . After that we need to remove un-necessary contents from our index page which are not essential in subpages like slider etc.

 step 1) open index.php with notepad++
step 2) press ctrl+N to make new document 
step 3) Copy all the contents of index.php to this page 
step 4) Find the line named <div class=slider ,
step 5) REmove this as we donot need it in subpages . 
step 6) Go to content div , and remove all the data inside content div cause we are gonna put different content in our subpages .

 Now Everything done . You can use similar method to make subpage of ur own website . Now we have ade a skeleton page , just save it and make its different copies naming ,

 gallery.php
hotels.php
gallery.php
destination.php

 like this . 

 Now we have made the skeleton of our subpage too  ,Now just need to put contents , To test our progress go to browser window and type  127.0.0.1/demo/ and try to navigate to all windows .If EVerything done than u are ready to proceed in next step .

 TILL NOW OUR FINAL CODE IS ,,,

 index.php >>>

 <html>
<head>
<script src="script.js"> </script>
<link rel="stylesheet" href="style.css"> 
</head>
<body onload="slides()">

 <!--main wrapper -->

 <div class="wrapper">

 <!--Header -->

 <div class="headline">

 <img id="logo1" src="logo1.gif" width=100 height=100>
<span class="title">Welcome To TravelNepal.com </span>
<img id="logo2" src="logo2.png" width=100 height=100>
</div>

 <!--Navigation dropdown menu -->
<div class="nav">

 <ul>
<li> <a href=""> Home</a> </li>

 <li><a href=""> Destinations </a>
<ul>
<li> <a href=""> Valley</a></li>
<li><a href="">East </a></li>
<li> <a href="">West </a></li>
<li> <a href="">Terai </a></li>
</ul>
</li>
<li> <a href="">Hotels</a>
</li>
<li> <a href="">Gallery</a>
<ul>
<li><a href=""> VAlley</a></li>
<li> <a href="">Himalaya</a> </li>
<li> <a href="">Pokhara</a> </li>
</ul>
</li>
<li> <a href="">About Us</a>
</li>
</ul>
</div>

 <!--For image slider -->
<div class="slider">

 <img id="slide" src="1.jpg" width=100% height=200>

 </div>
<!--hamro page ko main content -->
<div class="content">

 <div class="texts" style="text-align:center;">
Nepal is the country where Mount Everest, the highest mountain peak in the world, is located. Mountaineering and other 

 types of adventure tourism and ecotourism are important attractions for visitors. The world heritage site Lumbini, 

 birthplace of Gautama Buddha, is located in southern Nepal, and there are other important religious pilgrimage sites 

 throughout the country.

 According to statistics of 2012, there is slow growth rate of 9.8%. The number of tourists had increased by 21.4 

 percent in 2011, which was Nepal Tourism Year (NTY). According to statistics from Nepal Tourism Board (NTB), a 

 total of 598,204 foreign tourists entered the country via aerial route in 2012. The government of Nepal declared 2011 

 to be Nepal Tourism Year, and hoped to attract one million foreign tourists to the country during that year.[1] The 

 tourist industry is seen as a way to alleviate poverty and achieve greater social equity in the country. The government 

 of Nepal has also declared Lumbini Tourism Year 2012 to promote Lumbini - the birthplace of Lord Buddha.
</div>
<img src="a.jpg" width=400 height=200> <img src="2.jpg" width=400 height=200>  <img src="3.jpg" width=388 

 height=200> 
</div>
<!--right block -->
<!--Footer of our website -->
<div class="footer">
<span id="foot" >Site designed and maintained by sabin </span>
</div>
</div>
</body>
</html>

 script.js (for slider ) >>>>

 var i=0;
function slides()
{
var x= new Array("1.jpg","2.jpg","3.jpg","4.jpg");
var img=document.getElementById('slide');
if(i>=3)
{
i=0;
}

 else
{
i=i+1;
}

 img.src=x[i];
img.style.width='100%';
img.style.height=180;
setTimeout("slides()",5000);
}

 and style.css >>>>

 body
{
margin:0;
padding:0px;
}
.wrapper
{
margin:0px auto;
width:1200px;
height:700px;
background-color:rgba(100,100,200,0.4);
}
.headline
{
height:100px;
background-color:black;
}

 #logo2
{

 left:auto;
right:10px;
float:right;
}
.title
{
position:absolute;
top:0;
left:450px;
color:white;
font-size:25px;
font-family:comic sans ms;

 }
.nav
{
width:100%;
height:43px;

 margin-right:auto;
margin-top:2px;
background-color:black;
}
ul
{
z-index:2;
font-size:20px;
list-style: none;
padding: 0 ;
margin: 0;
}
ul li
{
display: block;
float: left;
position: relative;
border:0px solid;
}

 ul li a:hover
{
background-color:rgba(10,190,120,0.5);
}
ul li a
{
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
border-radius:20px;
color: white;
display : block;
background-color:rgba(100,150,50,0.9);
text-decoration : none;
text-align:center;
padding : 10 15 10 15;
margin-left: 5;
width: 130 ;
height : 20 ;
}

 li ul li a
{
border-radius:10px;
}

  li ul li a:hover
{
background-color: pink;

 }

 li ul
{
display: none;
}

 li:hover ul
{
display: block;
position : absolute;

 }

 #slide {
 //   -webkit-animation: slides 5s infinite; 
//    animation: slides 5s infinite ;
 z-index:-1;
}

 @-webkit-keyframes slides {
    from {opacity: 100%;width:100%;}
    to {opacity: 0.4;width:0%;margin-left:0%;}
}

 .content
{
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
height:400px;
color:white;
font-size:15px;
line-height:20px;
font-family:comic sans ms;
}

 .footer
{
color:white;

 height:20px;
background-color:rgba(200,100,10,0.8);
}

 and gallery.php,hotels.php,about_us.php , destination.php ko code chai ,,,>>>>

 <html>
<head>
<script src="script.js"> </script>
<link rel="stylesheet" href="style.css"> 
</head>
<body onload="slides()">

 <!--main wrapper -->

 <div class="wrapper">

 <!--Header -->

 <div class="headline">

 <img id="logo1" src="logo1.gif" width=100 height=100>
<span class="title">Welcome To TravelNepal.com </span>
<img id="logo2" src="logo2.png" width=100 height=100>
</div>

 <!--Navigation dropdown menu -->
<div class="nav">

 <ul>
<li> <a href="index.php"> Home</a> </li>

 <li><a href="destination.php"> Destinations </a>
</li>
<li> <a href="hotels.php">Hotels</a>
</li>
<li> <a href="gallery.php">Gallery</a>
<ul>
<li><a href="gallery.php?place=valley"> VAlley</a></li>
<li> <a href="gallery.php?place=valley">Himalaya</a> </li>
<li> <a href="gallery.php?place=valley">Pokhara</a> </li>
</ul>
</li>
<li> <a href="about_us.php">About Us</a>
</li>
</ul>
</div>

 <!--hamro page ko main content -->
<div class="content" style="height:700px;">

 </div>
<!--right block -->
<!--Footer of our website -->
<div class="footer">
<span id="foot" >Site designed and maintained by sabin </span>
</div>
</div>
</body>
</html>

 like this ..

 PART 3) Till Now we have created all required page, subpage etc. now we just need to add contents to our webpage . so lets start it . In this demo i'll show u how to load database contents to our hotels.php page ,for example : when we click on hotels page we need to have contents displayed in our page from database with information s like name , location , contact_no display in tabular form , OK?

 For this we need to create database there are various ways to do this like ,

 1) from 127.0.0.1/phpmyadmin and create there . I donot recommend it . . Here i am gonna show u how to make portable 

 database which u can load in any pc and server with just one click 

 2) From  .sql file and importing it to phpmyadmin 

 3) from portable database script php file 

i recommend step 3 cause its easy and portable too . just one click can create your full database with table and necessary fields.
here i am gonna doing this .

 B4 doing this just know ,We have to confirm what database to made , what fields to put in this and so on.
For this tutorial lets make a database tourism with 3 tables 

 gallery , hotels , destinations ,....

 in this tutorial i am just gonna show u database of hotels page . here we are gonna laoding content of table hotels to our hotels.php file ..Lets make a portable database php script create new document by clicking ctrl+n in notepad++ and save it as 1.php and we have to put content inside it as follows

 <?php
$con=mysqli_connect("LOCALHOST","root","");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

 // Create database
$sql="CREATE DATABASE tourism";
errorcheck($con,$sql);
//connect to database
$con=mysqli_connect("LOCALHOST","root","","tourism");
errorcheck($con,$sql);
// Create table
$sql="CREATE TABLE hotels(name varchar(100) ,location varchar(100) ,contact integer(20), id integer(10) 

 AUTO_INCREMENT PRIMARY KEY)";
errorcheck($con,$sql);

 $sql= " INSERT INTO hotels (name,location,contact) values('godawori','banepa','9849952435')";
errorcheck($con,$sql);

 function errorcheck($con,$sql)
{
if (mysqli_query($con,$sql)) {
  echo "Work Done".'<br>';
} else {
  echo "Error creating table: " . mysqli_error($con).'<br>';
}

 }

 ?>

 save it to same location and
and after everything is set go to 127.0.0.1/demo/1.php . 

 It is our portable PHP . Just loading once can fully automate process of creation of whole database .we can add more data later . Liek this we can add database of gallery , travel etc and we can also insert data later .if it says work done in all line except second than everything is fine. Till now we have done all major works like making contents page , mysql database and so on .


Other things will be in PART 5 , so stay visiting myTrickopedia .


To download whole content visit here  

 sabinkhanal.com.np/demo.zip

0 comments:

Post a Comment