Scribd
Upload
122 views8 pages

Bootstrap Jquery Minimal Responsive Day 1

Uploaded by

tarik bagriyanik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
122 views8 pages

Bootstrap Jquery Minimal Responsive Day 1

Uploaded by

tarik bagriyanik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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