Scribd
Upload
113 views

Bootstrap Jquery Minimal Responsive Day 1

Uploaded by

tarik bagriyanik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
113 views

Bootstrap Jquery Minimal Responsive Day 1

Uploaded by

tarik bagriyanik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Minimal, Responsive, Asynchronous Site Day 1

Lets make a simple site with modern (for now) technologies:


HTML5, CSS3, jQuery1.11, Bootstrap 3.1 and PHP5
* Adobe Dreamweaver CS6 is our text editor. You need to be familiar for all HTML, CSS, javascript and PHP
basics
1- Download these files:
a. Bootstrap: http://getbootstrap.com/customize/ (front-end CSS framework)
b. jQuery: http://jquery.com/download/ (Lightweight JavaScript library)
c. PHP&MySQL: https://www.apachefriends.org/download.html (local server)

2- Install or start your apache and mysql servers:

3- Make a database with phpmyadmin:

4- Put your files in a folder in your c:\xampp\htdocs root:

5- We dont have to use every file we download, we can delete or put another folder some files. I want to
use uncompressed files for javascript and css files to observe their contents to learn better. Others can
be deleted.
6- In Dreamweaver, I opened a new PHP (HTML5) index.php file:

7- Add the javascript and css files:
<!doctype html>
<html>
<head>
<meta charset="iso-8859-9">
<title>a Site - minimal</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.11.1.js"></script>
</head>

<body>
<script src="js/bootstrap.js"></script>
</body>
</html>

8- If you dont have any idea, check Bootstraps http://getbootstrap.com/getting-started/ and
http://getbootstrap.com/examples.
9- Add this line to the head for mobile users:
<meta name="viewport" content="width=device-width, initial-scale=1">
10- We generally add <script> to the head but for faster loading, they advice us to put them to the
previous line of </body>.
11- Now we need a container div in the body. I prefer class container-fluid to fit the screen:
<div class="container-fluid"> ... </div>
12- Here I added a row and a single column:
<html><head>
<meta charset="iso-8859-9">
<title>a Site - minimal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.1.js"></script>
</head>

<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="well">a Site - Minimal, Responsive, Asynchronous Site</h1>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body></html>

13- Title looks ok for now, lets add 2 columns for menu and content:
<div class="row">
<div class="col-sm-2">
<h3 class="well">Menu</h3>
</div>
<div class="col-sm-10">
<h3 class="well">Content</h3>
</div>
</div>

14- Add some fixes:
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<h2>a Site - Minimal, Responsive, Asynchronous Site</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2">
<h3 class="well">Menu</h3>
</div>
<div class="col-xs-12 col-sm-10">
<h3 class="well">Content</h3>
</div>
</div>
</div>

For desktop size we have 2 columns and a large h1.

After we resize, we see 1 column and smaller h1.
15- Lets add nesting columns inside the content class:
<div class="col-xs-12 col-sm-10">
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Item 0</h3>
</div>
<div class="panel-body"> Item's details </div>
</div>
</div>
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Item 1</h3>
</div>
<div class="panel-body"> Item's details </div>
</div>
</div>
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Item 2</h3>
</div>
<div class="panel-body"> Item's details </div>
</div>
</div>
</div>

Full size we see 3 items, after resizing we see everthing 1 column and readable for mobil users.

16- Now we can add real data for item panels, for connecting to the MySQL server, add this lines inside
the body tag:
<body role="document">
<?php
@mysql_connect("localhost","root","pass") or die("database server is down? <br/> ".mysql_error());
?>

17- Filling data is syncronous for now:
<div class="col-xs-12 col-sm-10">
<?php
$selectQuery = mysql_query("SELECT * FROM asite_db.asite_table LIMIT 0,5");
while($row=mysql_fetch_array($selectQuery)):
?>
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Item <?php echo $row["id"]?></h3>
</div>
<div class="panel-body"><?php echo $row["name"]?></div>
<p><a class="btn btn-primary" href="#" role="button">View details </a></p>
</div>
</div>
<?php endwhile;?>
</div>

Looks better and works! So, we came the last part.
18- Now, we will convert this full page refresh to asyncronous by using jQuery. We can also use this
library to animate, to add/remove tags dynamically. Before this, let me give you the last full HTML
code:
<!doctype html>
<html>
<head>
<meta charset="iso-8859-9">
<title>a Site - minimal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.11.1.js"></script>
</head>

<body role="document">
<?php
@mysql_connect("localhost","root","") or die("database server is down?<br/>".mysql_error());
?>
<div class="container-fluid">
<div class="jumbotron">
<div class="row">
<div class="col-lg-12">
<h1>a Site - Minimal, Responsive, Asynchronous Site</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2">
<div class="list-group"> <a href="index.php" class="list-group-item active"> Home </a> <a
href="#" class="list-group-item">Projects</a> <a href="#" class="list-group-item">About</a>
</div>
</div>
<div class="col-xs-12 col-sm-10">
<?php
$selectQuery = mysql_query("SELECT * FROM asite_db.asite_table LIMIT 0,5");
while($row=mysql_fetch_array($selectQuery)):
?>
<div class="col-sm-4">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Item <?php echo $row["id"]?></h3>
</div>
<div class="panel-body"><?php echo $row["name"]?></div>
<div class="panel-footer"><a class="btn btn-primary" href="#" role="button">View details
</a></div>
</div>
</div>
<?php endwhile;?>
</div>
</div>
<div class="footer">
<p>Copyleft 2014</p>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>


Looks lovely for me! If you dont like the white-blue default theme, look for Bootstrap templates
19- See you at the second day

You might also like