halaman web dengan HTML saja, maka halaman web Anda akan tampak statis. Artinya, isi halaman web Anda akan selalu tetap. Nah pada kali ini saya akan membuat tampilan sebuah web dengan PHP dac CSS Bootstrap, dimna dengantujuan agar tampilan web jadi lebih menarik alias DINAMIS.berikut ini adalah Tampilan web Dinamis (tampilan index.php) alias HOME heheheh
- Pada tampilan ini menampilkan tampilan dari menu web
- Ada menu Login Untuk Admin
- Dan ada pembuatan Slider agar lebih mnarik di home
- Sourcecode index.html :
<html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
.carousel .container {
position: relative;
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
}
.carousel .item {
height: 450px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 450px;
}
.carousel-caption {
background-color: transparent;
position: static;
max-width: 500px;
padding: 0 20px;
margin-top: 20px;
margin-left: 50px
}
.carousel-caption h2,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .span4 {
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .span4 p {
margin-left: 10px;
margin-right: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
width: auto;
}
.navbar-inner {
border-radius: 0;
margin: -20px 0;
}
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
.featurette {
height: auto;
padding: 0;
}
.featurette-image.pull-left,
.featurette-image.pull-right {
display: block;
float: none;
max-width: 40%;
margin: 0 auto 20px;
}
}
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
}
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {
}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead,
.carousel-caption .btn {
font-size: 18px;
}
.marketing .span4 + .span4 {
margin-top: 40px;
}
.featurette-heading {
font-size: 30px;
}
.featurette .lead {
font-size: 18px;
line-height: 1.5;
}
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h2>Example headline.</h2>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h2>Another example headline.</h2>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h2>Another example headline.</h2>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<div class="container">
<div class="row kotak">
<div class="span9">
<div class="row-fluid">
<div class="span12 kotak-post">
<a href="post1.html"><h2>Implementasikan Ide Kalian</h2></a>
<p>Ide adalah sesuatu hal yang sangat sulit untuk di cari dan di dapat, akan tetapi ide positif apapun itu akan membawa kepada hal baik. Jadi apabila kalian mempunyai ide postif, kreatif dan inovatif maka segeralah untuk di implementasikan. Bagaimanapun hasilnya itu akan sangat memuaskan karena itu adalah ide dari diri kalian sendiri..<a href="post1.html">Read More</a></p>
</div>
</div>
<div class="row-fluid">
<div class="span12 kotak-post">
<a href="post2.html"><h2>Bagi-bagi Ide</h2></a>
<p>Terkadang kita mempunyai ide tetapi kita tidak bisa mengimplementasikan dan bagaimana harus memulai untuk mengimplementasikan. Nah<a href="about.html">Idea.Net</a> menyediakan forum untuk bagi-bagi ide kalian jika ada yang mau. Silahkan <a href="signup.html"><button class="btn btn-small btn-primary" type="button">Sign Up</button></a> atau <a href="signin.html"><button class="btn btn-small btn-primary" type="button">Sign In</button></a> <a href="forum.php"> </a><a href="post1.html">Read More</a></p>
</div>
</div>
<div class="row-fluid">
<div class="span12 kotak-post">
<a href="post3.html"><h2>Idea Competition</h2></a>
<p>Kompetisi ide ini adalah bagaimana kita mencari ide kreatif, inovatif dan tentunya positif juga. Ayo gabung dengan kami dan munculkan ide terbaik kalian.<a href="competition.html"><button class="btn btn-small btn-primary" type="button">Register</button></a> <a href="post1.html">Read More</a></p>
</div>
</div>
</div>
<div class="span3 box-sidebar">
<div class="sidebar-header"><h3>SIGN IN FORUM</h3></div>
<div class="box-sidebar-content">
<form method="post" action="signin.php">
<table class="table">
<tr>
<td><input type="text" class="input-medium" name="username" placeholder="Username"></td>
</tr>
<tr>
<td><input type="password" class="input-medium" name="password" placeholder="Password"></td>
</tr>
<tr>
<td><input type="submit" value="Sign In"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="span3 box-sidebar">
<div class="sidebar-header"><h3>RECENT POST</h3></div>
<div class="box-sidebar-content">
<ul type="square">
<li><a href="post1.html">Implementasikan Ide Kalian</a></li>
<li><a href="post2.html">Bagi-bagi Ide</a></li>
<li><a href="post3.html">Idea Competition</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row kotak">
<div class="span12">
<div class="row-fluid">
<div class="span4 box-footer">
<div class="footer-header"><h3>Contact</h3></div>
<div class="box-footer-content">
<p><b>Idea.Net</b></p>
<p>Kantor : Jl. Gedong Kuning, Yogyakarta</p>
<p>Email : idea@idea.net</p>
</div>
</div>
<div class="span4 box-footer">
<div class="footer-header"><h3>Categories</h3></div>
<div class="box-footer-content">
<ul type="square">
<li><a href="post1.html">Article</a></li>
<li><a href="post2.html">Article Forum</a></li>
<li><a href="post3.html">Competition</a></li>
</ul>
</div>
</div>
<div class="span4 box-footer">
<div class="footer-header"><h3>Archives</h3></div>
<div class="box-footer-content">
<ul type="square">
<li><a href="post1.html">Desember,2012</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 5000})
})
}(window.jQuery)
</script>
</body>
</html>
Ups nah lok yang kedua ini adalah adalh Halaman yang paling yang utama dari Final Projet pembuatan Web ini. Yaoitu FORUM , Pastinya Dah gak asing lagi kan mang nama nya forumm.
ya pada bagian ini User dapat meberikan unek2 nya , atau pun Sesuatu yang ada di web Atau Manajemen yang lagi anda Buat .
youkk langsung ajah amati ???
- Pada bagian ini User jika ingin menulis unek2 nya dia diharus kan Login dahulu , ya biar sedikit profesional gitu dechh heheheh..
- untuk itu seblum nya user sudah pastiakn dahulu medaftar sebagai user pada web ini.
- Bisa Posting Tred dan Komen yang ada di forum
- Sourcecode Forum :
<?php
include "koneksi.php";
$data=mysql_query("select * from thread");
session_start();
if(!isset($_SESSION['login_status'])):
echo '<script>alert("anda harus login dulu");location.href="index.html";</script>';
else:
?>
<html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style type="text/css">
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row kotak-register">
<div class="span9">
<div class="row-fluid">
<div class="span12 forum boc">
<h2>Technologi</h2>
</div>
<?php while($pisah=mysql_fetch_object($data)): ?>
<div class="span12 forum-box">
<p class="forum-judul"><a href="post2.html"><?php echo $pisah->judul; $id=$pisah->id;?></a></p>
<p class="forum-isi"><?php echo $pisah->isi; ?><a href="about.html"><a hred="signup.php"><button class="btn btn-small btn-primary" type="button">Sign Up</button></a> atau <a hred="signin.php"><button class="btn btn-small btn-primary" type="button">Sign In</button></a> <a href="forum.html"> </a><a href="content-forum.php?id=<?php echo $id ?>">Read More</a></p>
<b>katagory : </b><?php echo $pisah->kategori."<br>".$pisah->tanggal; ?>
</div>
<?php endwhile;?>
</div>
</div>
<div class="span3 box-sidebar2">
<div class="sidebar-header"><a href="new.html"><ul><li>New Thread</li></ul></a></div>
</div>
<div class="span3 box-sidebar2">
<div class="sidebar-header"><h3>Categories</h3></div>
<div class="box-sidebar-content">
<ul type="square">
<li><a href="forum.html">Technology</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="nature.html">Nature</a></li>
<li><a href="sport.html">Sport</a></li>
<li><a href="logout.php"><b>logout</b></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 2000})
})
}(window.jQuery)
</script>
</body>
</html>
<?php
endif;
?>
Nah lok yang ini adalah tampilan dimana User yang telah terdaftar sebagai anggota ingin Membuat sebauh Tread Baru yang ada pada web tersebut .
- User membuat tread Baru
- wajib mengisi Judul, isi, kategori
- Langsung klik post ada dech lok dah lengkap biar tread yang ditulis langsung masuk ke Forum
- Sourcecode :
<html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style type="text/css">
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.html"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.html"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row kotak-register">
<div class="span9">
<div class="row-fluid">
<div class="span12 forum boc">
<h2>NEW THREAD</h2>
</div>
<div class="span12 forum-box">
<form method="post" action="post.php">
<table class="table">
<tr>
<td>Judul</td>
<td><input type="text" placeholder="Judul" name="judul"></td>
</tr>
<tr>
<td>Isi</td>
<td> <textarea rows="5" cols="10" name="isi" placeholder="isi"></textarea></td>
</tr>
<tr>
<td>competition.php</td>
<td><select name="competition.php">
<option value="Technologi">Technologi</option>
<option value="Technologi">Technologi</option>
<option value="Technologi">Technologi</option>
<option value="Technologi">Technologi</option>
<option value="Technologi">Technologi</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="POST"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 2000})
})
}(window.jQuery)
</script>
</body>
</html>
Nah itu dia Kurang lebih tentang pembuatan forum ya walaupun masih sederhana dan butuh pengembangan lagi .
youk langsung ajha ke menu berikut nya yaitu menu Comppitisi.
Pada Pilhan menu yang satu ini adalah untuk menapilakan User yang ikut serta data user yang terdaftar dalam kompetisi ini ,
- Pada tampilan ini menapilkan Data user yang terdaftar di competisi
- Data ini diambil dari Databasenya
- SourceCode :
<html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style type="text/css">
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row kotak-register">
<div class="span9">
<div class="row-fluid">
<div class="span12 kotak-post">
<ul class="nav nav-tabs">
<li><a href="#info" data-toggle="tab">Info</a></li>
<li><a href="#register" data-toggle="tab">Register-Competition</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="info">
<h3>IDEA COMPETITION</h3>
<p>Ini adalah competisi untuk menuangkan ide kreatif, inovatif dan tentunya positif. Semua ide yang masuk akan kami seleksi sesuai dengan bobot dari kreatif, inovatif, bidangnya dan kepositifan untuk kehidupan kedamaian bermasyarakat. Jadi buruan gabung bersama kami.</p>
<p>List Peserta Idea Competition</p>
<table class="table" border="1">
<tr bgcolor="#ccFFFF">
<td>Nama</td>
<td>Email</td>
<td>Alamat</td>
<td>Ide</td>
</tr>
<?php
include 'koneksi.php';
$sql= mysql_query("SELECT *FROM lomba");
while ($row = mysql_fetch_object($sql)):
?>
<tr>
<td><?php echo $row->nama; ?></td>
<td><?php echo $row->email; ?></td>
<td><?php echo $row->alamat; ?></td>
<td><?php echo $row->ide; ?></td>
</tr>
<?php endwhile;?>
</table>
</div>
<div class="tab-pane" id="register"><div class="span12" align="center">
<form method="post" action="simpan.php">
<table>
<tr>
<td>E-mail</td>
<td><input type ="text" name="email"><span class="text-error">*</span></td>
</tr>
<tr>
<td>Nama</td>
<td><input type ="text" name="nama"><span class="text-error">*</span></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea cols="5" rows="3" name="alamat"></textarea><span class="text-error">*</span></td>
</tr>
<td>Ide</td>
<td><textarea cols="5" rows="3" name="ide"></textarea><span class="text-error">*</span></td>
</tr>
<td><span class="text-error">*harus diisi</span></td>
<td align="right"><input class="btn btn-inverse" type ="submit" value="Register"></td>
</tr>
</form>
</table>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 2000})
})
}(window.jQuery)
</script>
</body>
</html>
- pada table ini akan menampilkan semau diweb nya sesuai nama field nya
- Amatai ajah dech lebih lanjut lagi
Nah lok ini adalah tampilan dari form registrasi saat anda ingin melakukan registrasi di competisi yang ada di web ini .
- User menginputkan sesuai apa yag ada di form ini .
- Dan wajib di isi pastinya untuk kelengkapan data
- sourceCode :
<pre style="font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:200px;overflow:auto;background:#f0f0f0;;background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSh4___p4yv6KrqsozA9K3U-uv4LFUHO8Ni6BpjnUmUFb76OR5-migFxc2ftG5h4WGJy5ItfRA7Gw58F1S0Oq6CykdciI0vodXRFUU5qL2SQ_jrgThcDs1aVofewmG1ICSYJ4pfjq8ar4R/s320/codebg.gif);padding:0px;color:#000000;text-align:left;line-height:20px;"><code style="color:#000000;word-wrap:normal;"> <html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style type="text/css">
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row kotak-register">
<div class="span9">
<div class="row-fluid">
<div class="span12 kotak-post">
<ul class="nav nav-tabs">
<li><a href="#info" data-toggle="tab">Info</a></li>
<li><a href="#register" data-toggle="tab">Register-Competition</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="info">
<h3>IDEA COMPETITION</h3>
<p>Ini adalah competisi untuk menuangkan ide kreatif, inovatif dan tentunya positif. Semua ide yang masuk akan kami seleksi sesuai dengan bobot dari kreatif, inovatif, bidangnya dan kepositifan untuk kehidupan kedamaian bermasyarakat. Jadi buruan gabung bersama kami.</p>
<p>List Peserta Idea Competition</p>
<table class="table" border="1">
<tr bgcolor="#ccFFFF">
<td>Nama</td>
<td>Email</td>
<td>Alamat</td>
<td>Ide</td>
</tr>
<?php
include 'koneksi.php';
$sql= mysql_query("SELECT *FROM lomba");
while ($row = mysql_fetch_object($sql)):
?>
<tr>
<td><?php echo $row->nama; ?></td>
<td><?php echo $row->email; ?></td>
<td><?php echo $row->alamat; ?></td>
<td><?php echo $row->ide; ?></td>
</tr>
<?php endwhile;?>
</table>
</div>
<div class="tab-pane" id="register"><div class="span12" align="center">
<form method="post" action="simpan.php">
<table>
<tr>
<td>E-mail</td>
<td><input type ="text" name="email"><span class="text-error">*</span></td>
</tr>
<tr>
<td>Nama</td>
<td><input type ="text" name="nama"><span class="text-error">*</span></td>
</tr>
<tr>
<td>Alamat</td>
<td><textarea cols="5" rows="3" name="alamat"></textarea><span class="text-error">*</span></td>
</tr>
<td>Ide</td>
<td><textarea cols="5" rows="3" name="ide"></textarea><span class="text-error">*</span></td>
</tr>
<td><span class="text-error">*harus diisi</span></td>
<td align="right"><input class="btn btn-inverse" type ="submit" value="Register"></td>
</tr>
</form>
</table>
</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 2000})
})
}(window.jQuery)
</script>
</body>
</html>
</code></pre>
Hampir selai dechh Postingan saya ini dalam pembuatan web ini dengan PHP & Bootstrap
Opss lupa ada lagi ne tampilan dari database web ini saya lpa ama koneksi nya .
emm amann dechh tenang ajahh saya posting lagi kok .
- Menampilkan semua data tabel yang ada pada database
- source koneksi.php :
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "ide";
//koneksi ke mysql
mysql_connect($host,$username,$password) or die("koneksi gagal");
//select database
mysql_select_db($database) or die("gagal koneksi");
?>
Ini Tinggal tampilan Form komentar ,, maaff malah belakangan nea,, ne silahkan diamati ajhe yo ?
- Ya user setelah login bisa post post komen nya dech di web ini
- ya kurang lebihnya kaya gt lah maen nya web ini
- sourcecode :
<?php
session_start();
include "koneksi.php";
$id=$_GET['id'];
$data=mysql_query("select * from thread where id=".$id);
$pisah=mysql_fetch_object($data);
$datauser=mysql_query("select * from user ");
$pisahuser=mysql_fetch_object($datauser);
$datakomen=mysql_query("select * from komentar where id_tread=".$id);
?>
<html>
<head>
<title>ThemesInPecea</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
<style type="text/css">
.navbar .brand {
padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="index.html">idea.net</a>
<p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
<div class="nav-collapse collapse">
<div>
<ul class="nav pull-right">
<li><a href="index.html"><i class="icon-home"></i>Home</a></li>
<li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
<li><a href="about.html"><i class="icon-user"></i>About</a></li>
<li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row kotak-register">
<div class="span3 box-sidebar">
<div class="sidebar-header"><h3>Categories</h3></div>
<div class="box-sidebar-content">
<ul type="square">
<li><a href="post1.html">Technology</a></li>
<li><a href="post2.html">Education</a></li>
<li><a href="post3.html">Nature</a></li>
<li><a href="about.html">Sport</a></li>
<li><a href="logout.php"><b>logout</b></a></li>
</ul>
</div>
</div>
<div class="span9">
<div class="row-fluid">
<div class="span12 forum boc">
<h2><a href="forum.php">Technologi ></a> <?php echo $pisah->judul; ?></h2>
</div>
<div class="span12 forum-box">
<p class="forum-judul"><a href="post2.html"><?php echo $pisah->judul; ?></a></p>
<p class="forum-isi"><?php echo $pisah->isi; ?></p>
<?php while($pisahkomen=mysql_fetch_object($datakomen)): ?>
<div class="forum-coment">
<p><b>By : <?php echo $pisahkomen->id_user; ?></b><br><?php $str=$pisahkomen->komentar; echo nl2br( $str ); ?></p>
</div>
<?php endwhile;?>
<div class="forum-form">
<form method="post" action="komentar.php">
<p><b>by : <?php echo $_SESSION['id_user'];?></b></p>
<input type="hidden" name="idjudul" value="<?php echo $id; ?>">
<input type="hidden" name="pengguna" value="<?php echo $_SESSION['id_user'];?>">
<textarea rows="3" name="koment" placeholder="komentar"></textarea><br>
<input class="btn btn-small" type="submit" value="Comment">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel({interval: 2000})
})
}(window.jQuery)
</script>
</body>
</html>
Nah kurang lebih kaya gt lah gambaran besar singkat nya tentang pembuatan web ini .,
lok adayang masih kurang jelas ya silah kan tigal kan unek unek nya disini agar kaita sama sama bisa saling sering satu amalain nya .
1 Comments
gk ada pilihan buat donlot source nya bang?
ReplyDelete