web dinamis (dynamic site) merupakan jenis web dengan konten berisikan informasi yang dapat berubah-ubah (dinamis). dan dapat di update oleh user maupun pengunjung. kali ini kelompok kami membuat web yang difokuskan untuk forum diskusi.
dan ini adalah tampilan home berisi :
- thread-thread terakhir dalam postingan di forum.
- form login, untuk memasuki forum pengguna diwajibkan untuk login terlebih dahulu, jadi tanpa login dia tidak bisa memasuku forum.
1: <html>
2: <head>
3: <title>ThemesInPecea</title>
4: <link rel="stylesheet" type="text/css" href="style.css"/>
5: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
6: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
7: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
8: <style>
9: /* GLOBAL STYLES
10: -------------------------------------------------- */
11: /* Padding below the footer and lighter body text */
12: body {
13: padding-bottom: 40px;
14: color: #5a5a5a;
15: }
16: /* CUSTOMIZE THE NAVBAR
17: -------------------------------------------------- */
18: /* Special class on .container surrounding .navbar, used for positioning it into place. */
19: .navbar-wrapper {
20: position: absolute;
21: top: 0;
22: left: 0;
23: right: 0;
24: z-index: 10;
25: margin-top: 20px;
26: margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
27: }
28: .navbar-wrapper .navbar {
29: }
30: /* Remove border and change up box shadow for more contrast */
31: .navbar .navbar-inner {
32: border: 0;
33: -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
34: -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
35: box-shadow: 0 2px 10px rgba(0,0,0,.25);
36: }
37: /* Downsize the brand/project name a bit */
38: .navbar .brand {
39: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
40: font-size: 16px;
41: font-weight: bold;
42: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
43: }
44: /* Navbar links: increase padding for taller navbar */
45: .navbar .nav > li > a {
46: padding: 15px 20px;
47: }
48: /* Offset the responsive button for proper vertical alignment */
49: .navbar .btn-navbar {
50: margin-top: 10px;
51: }
52: /* CUSTOMIZE THE NAVBAR
53: -------------------------------------------------- */
54: /* Carousel base class */
55: .carousel {
56: margin-bottom: 60px;
57: }
58: .carousel .container {
59: position: relative;
60: z-index: 9;
61: }
62: .carousel-control {
63: height: 80px;
64: margin-top: 0;
65: font-size: 120px;
66: text-shadow: 0 1px 1px rgba(0,0,0,.4);
67: background-color: transparent;
68: border: 0;
69: }
70: .carousel .item {
71: height: 450px;
72: }
73: .carousel img {
74: position: absolute;
75: top: 0;
76: left: 0;
77: min-width: 100%;
78: height: 450px;
79: }
80: .carousel-caption {
81: background-color: transparent;
82: position: static;
83: max-width: 500px;
84: padding: 0 20px;
85: margin-top: 20px;
86: margin-left: 50px
87: }
88: .carousel-caption h2,
89: .carousel-caption .lead {
90: margin: 0;
91: line-height: 1.25;
92: color: #fff;
93: text-shadow: 0 1px 1px rgba(0,0,0,.4);
94: }
95: .carousel-caption .btn {
96: margin-top: 10px;
97: }
98: /* MARKETING CONTENT
99: -------------------------------------------------- */
100: /* Center align the text within the three columns below the carousel */
101: .marketing .span4 {
102: text-align: center;
103: }
104: .marketing h2 {
105: font-weight: normal;
106: }
107: .marketing .span4 p {
108: margin-left: 10px;
109: margin-right: 10px;
110: }
111: /* Featurettes
112: ------------------------- */
113: .featurette-divider {
114: margin: 80px 0; /* Space out the Bootstrap <hr> more */
115: }
116: .featurette {
117: padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
118: overflow: hidden; /* Vertically center images part 2: clear their floats. */
119: }
120: .featurette-image {
121: margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
122: }
123: /* Give some space on the sides of the floated elements so text doesn't run right into it. */
124: .featurette-image.pull-left {
125: margin-right: 40px;
126: }
127: .featurette-image.pull-right {
128: margin-left: 40px;
129: }
130: /* Thin out the marketing headings */
131: .featurette-heading {
132: font-size: 50px;
133: font-weight: 300;
134: line-height: 1;
135: letter-spacing: -1px;
136: }
137: /* RESPONSIVE CSS
138: -------------------------------------------------- */
139: @media (max-width: 979px) {
140: .container.navbar-wrapper {
141: margin-bottom: 0;
142: width: auto;
143: }
144: .navbar-inner {
145: border-radius: 0;
146: margin: -20px 0;
147: }
148: .carousel .item {
149: height: 500px;
150: }
151: .carousel img {
152: width: auto;
153: height: 500px;
154: }
155: .featurette {
156: height: auto;
157: padding: 0;
158: }
159: .featurette-image.pull-left,
160: .featurette-image.pull-right {
161: display: block;
162: float: none;
163: max-width: 40%;
164: margin: 0 auto 20px;
165: }
166: }
167: @media (max-width: 767px) {
168: .navbar-inner {
169: margin: -20px;
170: }
171: .carousel {
172: margin-left: -20px;
173: margin-right: -20px;
174: }
175: .carousel .container {
176: }
177: .carousel .item {
178: height: 300px;
179: }
180: .carousel img {
181: height: 300px;
182: }
183: .carousel-caption {
184: width: 65%;
185: padding: 0 70px;
186: margin-top: 100px;
187: }
188: .carousel-caption h1 {
189: font-size: 30px;
190: }
191: .carousel-caption .lead,
192: .carousel-caption .btn {
193: font-size: 18px;
194: }
195: .marketing .span4 + .span4 {
196: margin-top: 40px;
197: }
198: .featurette-heading {
199: font-size: 30px;
200: }
201: .featurette .lead {
202: font-size: 18px;
203: line-height: 1.5;
204: }
205: }
206: </style>
207: <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
208: <!--[if lt IE 9]>
209: <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
210: <![endif]-->
211: <!-- Fav and touch icons -->
212: <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
213: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
214: <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
215: <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
216: <link rel="shortcut icon" href="ico/favicon.png">
217: </head>
218: <body>
219: <div class="container">
220: <div class="navbar navbar-fixed-top">
221: <div class="navbar-inner">
222: <a class="brand" href="index.html">idea.net</a>
223: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
224: <div class="nav-collapse collapse">
225: <div>
226: <ul class="nav pull-right">
227: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
228: <li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
229: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
230: <li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
231: </ul>
232: </div>
233: </div>
234: </div>
235: </div>
236: </div>
237: <!-- Carousel
238: ================================================== -->
239: <div id="myCarousel" class="carousel slide">
240: <div class="carousel-inner">
241: <div class="item active">
242: <img src="img/slide-01.jpg" alt="">
243: <div class="container">
244: <div class="carousel-caption">
245: <h2>Example headline.</h2>
246: <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>
247: <a class="btn btn-large btn-primary" href="#">Sign up today</a>
248: </div>
249: </div>
250: </div>
251: <div class="item">
252: <img src="img/slide-01.jpg" alt="">
253: <div class="container">
254: <div class="carousel-caption">
255: <h2>Another example headline.</h2>
256: <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>
257: <a class="btn btn-large btn-primary" href="#">Learn more</a>
258: </div>
259: </div>
260: </div>
261: <div class="item">
262: <img src="img/slide-01.jpg" alt="">
263: <div class="container">
264: <div class="carousel-caption">
265: <h2>Another example headline.</h2>
266: <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>
267: <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
268: </div>
269: </div>
270: </div>
271: </div>
272: <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
273: <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
274: </div><!-- /.carousel -->
275: <div class="container">
276: <div class="row kotak">
277: <div class="span9">
278: <div class="row-fluid">
279: <div class="span12 kotak-post">
280: <a href="post1.html"><h2>Implementasikan Ide Kalian</h2></a>
281: <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>
282: </div>
283: </div>
284: <div class="row-fluid">
285: <div class="span12 kotak-post">
286: <a href="post2.html"><h2>Bagi-bagi Ide</h2></a>
287: <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>
288: </div>
289: </div>
290: <div class="row-fluid">
291: <div class="span12 kotak-post">
292: <a href="post3.html"><h2>Idea Competition</h2></a>
293: <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>
294: </div>
295: </div>
296: </div>
297: <div class="span3 box-sidebar">
298: <div class="sidebar-header"><h3>SIGN IN FORUM</h3></div>
299: <div class="box-sidebar-content">
300: <form method="post" action="signin.php">
301: <table class="table">
302: <tr>
303: <td><input type="text" class="input-medium" name="username" placeholder="Username"></td>
304: </tr>
305: <tr>
306: <td><input type="password" class="input-medium" name="password" placeholder="Password"></td>
307: </tr>
308: <tr>
309: <td><input type="submit" value="Sign In"></td>
310: </tr>
311: </table>
312: </form>
313: </div>
314: </div>
315: <div class="span3 box-sidebar">
316: <div class="sidebar-header"><h3>RECENT POST</h3></div>
317: <div class="box-sidebar-content">
318: <ul type="square">
319: <li><a href="post1.html">Implementasikan Ide Kalian</a></li>
320: <li><a href="post2.html">Bagi-bagi Ide</a></li>
321: <li><a href="post3.html">Idea Competition</a></li>
322: <li><a href="about.html">About Me</a></li>
323: </ul>
324: </div>
325: </div>
326: </div>
327: </div>
328: <div class="container">
329: <div class="row kotak">
330: <div class="span12">
331: <div class="row-fluid">
332: <div class="span4 box-footer">
333: <div class="footer-header"><h3>Contact</h3></div>
334: <div class="box-footer-content">
335: <p><b>Idea.Net</b></p>
336: <p>Kantor : Jl. Gedong Kuning, Yogyakarta</p>
337: <p>Email : idea@idea.net</p>
338: </div>
339: </div>
340: <div class="span4 box-footer">
341: <div class="footer-header"><h3>Categories</h3></div>
342: <div class="box-footer-content">
343: <ul type="square">
344: <li><a href="post1.html">Article</a></li>
345: <li><a href="post2.html">Article Forum</a></li>
346: <li><a href="post3.html">Competition</a></li>
347: </ul>
348: </div>
349: </div>
350: <div class="span4 box-footer">
351: <div class="footer-header"><h3>Archives</h3></div>
352: <div class="box-footer-content">
353: <ul type="square">
354: <li><a href="post1.html">Desember,2012</a></li>
355: </ul>
356: </div>
357: </div>
358: </div>
359: </div>
360: </div>
361: </div>
362: <!-- Le javascript
363: ================================================== -->
364: <!-- Placed at the end of the document so the pages load faster -->
365: <script src="js/jquery.js"></script>
366: <script src="js/bootstrap-transition.js"></script>
367: <script src="js/bootstrap-alert.js"></script>
368: <script src="js/bootstrap-modal.js"></script>
369: <script src="js/bootstrap-dropdown.js"></script>
370: <script src="js/bootstrap-scrollspy.js"></script>
371: <script src="js/bootstrap-tab.js"></script>
372: <script src="js/bootstrap-tooltip.js"></script>
373: <script src="js/bootstrap-popover.js"></script>
374: <script src="js/bootstrap-button.js"></script>
375: <script src="js/bootstrap-collapse.js"></script>
376: <script src="js/bootstrap-carousel.js"></script>
377: <script src="js/bootstrap-typeahead.js"></script>
378: <script>
379: !function ($) {
380: $(function(){
381: // carousel demo
382: $('#myCarousel').carousel({interval: 5000})
383: })
384: }(window.jQuery)
385: </script>
386: </body>
387: </html>
2. Tampilan forum
Dalam menu forum ini terdapat postingan seseorang yang telah login dan memposting thread baru.
Disini terdapat beberapa kategori untuk memisahkan postingan.dan untuk melihat lebih lanjut atau memberikan komentar maka tinggal mengeklik redmore pada thread yang ada.
source code forum.php :
1: <?php
2: include "koneksi.php";
3: $data=mysql_query("select * from thread");
4: session_start();
5: if(!isset($_SESSION['login_status'])):
6: echo '<script>alert("anda harus login dulu");location.href="index.html";</script>';
7: else:
8: ?>
9: <html>
10: <head>
11: <title>ThemesInPecea</title>
12: <link rel="stylesheet" type="text/css" href="style.css"/>
13: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
14: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
15: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
16: <style type="text/css">
17: .navbar .brand {
18: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
19: font-size: 16px;
20: font-weight: bold;
21: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
22: }
23: </style>
24: </head>
25: <body>
26: <div class="container">
27: <div class="navbar navbar-fixed-top">
28: <div class="navbar-inner">
29: <a class="brand" href="index.html">idea.net</a>
30: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
31: <div class="nav-collapse collapse">
32: <div>
33: <ul class="nav pull-right">
34: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
35: <li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
36: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
37: <li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
38: </ul>
39: </div>
40: </div>
41: </div>
42: </div>
43: <div class="row kotak-register">
44: <div class="span9">
45: <div class="row-fluid">
46: <div class="span12 forum boc">
47: <h2>Technologi</h2>
48: </div>
49: <?php while($pisah=mysql_fetch_object($data)): ?>
50: <div class="span12 forum-box">
51: <p class="forum-judul"><a href="post2.html"><?php echo $pisah->judul; $id=$pisah->id;?></a></p>
52: <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>
53: <b>katagory : </b><?php echo $pisah->kategori."<br>".$pisah->tanggal; ?>
54: </div>
55: <?php endwhile;?>
56: </div>
57: </div>
58: <div class="span3 box-sidebar2">
59: <div class="sidebar-header"><a href="new.html"><ul><li>New Thread</li></ul></a></div>
60: </div>
61: <div class="span3 box-sidebar2">
62: <div class="sidebar-header"><h3>Categories</h3></div>
63: <div class="box-sidebar-content">
64: <ul type="square">
65: <li><a href="forum.html">Technology</a></li>
66: <li><a href="education.html">Education</a></li>
67: <li><a href="nature.html">Nature</a></li>
68: <li><a href="sport.html">Sport</a></li>
69: <li><a href="logout.php"><b>logout</b></a></li>
70: </ul>
71: </div>
72: </div>
73: </div>
74: </div>
75: <!-- Le javascript
76: ================================================== -->
77: <!-- Placed at the end of the document so the pages load faster -->
78: <script src="js/jquery.js"></script>
79: <script src="js/bootstrap-transition.js"></script>
80: <script src="js/bootstrap-alert.js"></script>
81: <script src="js/bootstrap-modal.js"></script>
82: <script src="js/bootstrap-dropdown.js"></script>
83: <script src="js/bootstrap-scrollspy.js"></script>
84: <script src="js/bootstrap-tab.js"></script>
85: <script src="js/bootstrap-tooltip.js"></script>
86: <script src="js/bootstrap-popover.js"></script>
87: <script src="js/bootstrap-button.js"></script>
88: <script src="js/bootstrap-collapse.js"></script>
89: <script src="js/bootstrap-carousel.js"></script>
90: <script src="js/bootstrap-typeahead.js"></script>
91: <script>
92: !function ($) {
93: $(function(){
94: // carousel demo
95: $('#myCarousel').carousel({interval: 2000})
96: })
97: }(window.jQuery)
98: </script>
99: </body>
100: </html>
101: <?php
102: endif;
103: ?>
3. Tampilan untuk readmore pada thread
disini akan ditampilkan detail untuk postingan dan yang memposting data tersebut, dan anda pun bisa juga memberikan komentar di thread ini.
yang tampil dalam thread ini
- thread secara lengkap (thread diambil dari database thread)
- komentar (komentar diambil dari database komentar dan berdasarkan id tread)
- form untuk memberikan komentar
source code content-forum.php :
1: <?php
2: session_start();
3: include "koneksi.php";
4: $id=$_GET['id'];
5: $data=mysql_query("select * from thread where id=".$id);
6: $pisah=mysql_fetch_object($data);
7: $datauser=mysql_query("select * from user ");
8: $pisahuser=mysql_fetch_object($datauser);
9: $datakomen=mysql_query("select * from komentar where id_tread=".$id);
10: ?>
11: <html>
12: <head>
13: <title>ThemesInPecea</title>
14: <link rel="stylesheet" type="text/css" href="style.css"/>
15: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
16: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
17: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
18: <style type="text/css">
19: .navbar .brand {
20: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
21: font-size: 16px;
22: font-weight: bold;
23: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
24: }
25: </style>
26: </head>
27: <body>
28: <div class="container">
29: <div class="navbar navbar-fixed-top">
30: <div class="navbar-inner">
31: <a class="brand" href="index.html">idea.net</a>
32: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
33: <div class="nav-collapse collapse">
34: <div>
35: <ul class="nav pull-right">
36: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
37: <li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
38: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
39: <li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
40: </ul>
41: </div>
42: </div>
43: </div>
44: </div>
45: <div class="row kotak-register">
46: <div class="span3 box-sidebar">
47: <div class="sidebar-header"><h3>Categories</h3></div>
48: <div class="box-sidebar-content">
49: <ul type="square">
50: <li><a href="post1.html">Technology</a></li>
51: <li><a href="post2.html">Education</a></li>
52: <li><a href="post3.html">Nature</a></li>
53: <li><a href="about.html">Sport</a></li>
54: <li><a href="logout.php"><b>logout</b></a></li>
55: </ul>
56: </div>
57: </div>
58: <div class="span9">
59: <div class="row-fluid">
60: <div class="span12 forum boc">
61: <h2><a href="forum.php">Technologi ></a> <?php echo $pisah->judul; ?></h2>
62: </div>
63: <div class="span12 forum-box">
64: <p class="forum-judul"><a href="post2.html"><?php echo $pisah->judul; ?></a></p>
65: <p class="forum-isi"><?php echo $pisah->isi; ?></p>
66: <?php while($pisahkomen=mysql_fetch_object($datakomen)): ?>
67: <div class="forum-coment">
68: <p><b>By : <?php echo $pisahkomen->id_user; ?></b><br><?php $str=$pisahkomen->komentar; echo nl2br( $str ); ?></p>
69: </div>
70: <?php endwhile;?>
71: <div class="forum-form">
72: <form method="post" action="komentar.php">
73: <p><b>by : <?php echo $_SESSION['id_user'];?></b></p>
74: <input type="hidden" name="idjudul" value="<?php echo $id; ?>">
75: <input type="hidden" name="pengguna" value="<?php echo $_SESSION['id_user'];?>">
76: <textarea rows="3" name="koment" placeholder="komentar"></textarea><br>
77: <input class="btn btn-small" type="submit" value="Comment">
78: </form>
79: </div>
80: </div>
81: </div>
82: </div>
83: </div>
84: </div>
85: <!-- Le javascript
86: ================================================== -->
87: <!-- Placed at the end of the document so the pages load faster -->
88: <script src="js/jquery.js"></script>
89: <script src="js/bootstrap-transition.js"></script>
90: <script src="js/bootstrap-alert.js"></script>
91: <script src="js/bootstrap-modal.js"></script>
92: <script src="js/bootstrap-dropdown.js"></script>
93: <script src="js/bootstrap-scrollspy.js"></script>
94: <script src="js/bootstrap-tab.js"></script>
95: <script src="js/bootstrap-tooltip.js"></script>
96: <script src="js/bootstrap-popover.js"></script>
97: <script src="js/bootstrap-button.js"></script>
98: <script src="js/bootstrap-collapse.js"></script>
99: <script src="js/bootstrap-carousel.js"></script>
100: <script src="js/bootstrap-typeahead.js"></script>
101: <script>
102: !function ($) {
103: $(function(){
104: // carousel demo
105: $('#myCarousel').carousel({interval: 2000})
106: })
107: }(window.jQuery)
108: </script>
109: </body>
110: </html>
1: <?php
2: include "koneksi.php";
3: $idjudul=$_POST['idjudul'];
4: $pengguna=$_POST['pengguna'];
5: $komen=$_POST['koment'];
6: mysql_query("insert into komentar(`id_tread`,`id_user`,`komentar`) values('$idjudul','$pengguna','$komen')");
7: echo '<script>location.href="content-forum.php?id='.$idjudul.'" </script>';
8: ?>
4. Tampilan untuk thread baru
untuk tread baru terdapat isian data sebagai berikut :
- judul thread
- isi thread
- katagori thread
dalam thread ini akan disimpan ke database (thread)
source code new.php :
1: <html>
2: <head>
3: <title>ThemesInPecea</title>
4: <link rel="stylesheet" type="text/css" href="style.css"/>
5: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
6: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
7: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
8: <style type="text/css">
9: .navbar .brand {
10: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
11: font-size: 16px;
12: font-weight: bold;
13: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
14: }
15: </style>
16: </head>
17: <body>
18: <div class="container">
19: <div class="navbar navbar-fixed-top">
20: <div class="navbar-inner">
21: <a class="brand" href="index.html">idea.net</a>
22: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
23: <div class="nav-collapse collapse">
24: <div>
25: <ul class="nav pull-right">
26: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
27: <li><a href="forum.html"><i class="icon-list"></i>Forum</a></li>
28: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
29: <li><a href="competition.html"><i class="icon-share"></i>Competition</a></li>
30: </ul>
31: </div>
32: </div>
33: </div>
34: </div>
35: <div class="row kotak-register">
36: <div class="span9">
37: <div class="row-fluid">
38: <div class="span12 forum boc">
39: <h2>NEW THREAD</h2>
40: </div>
41: <div class="span12 forum-box">
42: <form method="post" action="post.php">
43: <table class="table">
44: <tr>
45: <td>Judul</td>
46: <td><input type="text" placeholder="Judul" name="judul"></td>
47: </tr>
48: <tr>
49: <td>Isi</td>
50: <td> <textarea rows="5" cols="10" name="isi" placeholder="isi"></textarea></td>
51: </tr>
52: <tr>
53: <td>competition.php</td>
54: <td><select name="competition.php">
55: <option value="Technologi">Technologi</option>
56: <option value="Technologi">Technologi</option>
57: <option value="Technologi">Technologi</option>
58: <option value="Technologi">Technologi</option>
59: <option value="Technologi">Technologi</option>
60: </select></td>
61: </tr>
62: <tr>
63: <td></td>
64: <td><input type="submit" value="POST"></td>
65: </tr>
66: </table>
67: </form>
68: </div>
69: </div>
70: </div>
71: </div>
72: <!-- Le javascript
73: ================================================== -->
74: <!-- Placed at the end of the document so the pages load faster -->
75: <script src="js/jquery.js"></script>
76: <script src="js/bootstrap-transition.js"></script>
77: <script src="js/bootstrap-alert.js"></script>
78: <script src="js/bootstrap-modal.js"></script>
79: <script src="js/bootstrap-dropdown.js"></script>
80: <script src="js/bootstrap-scrollspy.js"></script>
81: <script src="js/bootstrap-tab.js"></script>
82: <script src="js/bootstrap-tooltip.js"></script>
83: <script src="js/bootstrap-popover.js"></script>
84: <script src="js/bootstrap-button.js"></script>
85: <script src="js/bootstrap-collapse.js"></script>
86: <script src="js/bootstrap-carousel.js"></script>
87: <script src="js/bootstrap-typeahead.js"></script>
88: <script>
89: !function ($) {
90: $(function(){
91: // carousel demo
92: $('#myCarousel').carousel({interval: 2000})
93: })
94: }(window.jQuery)
95: </script>
96: </body>
97: </html>
dan untuk menyimpan tread dengan kode.
source posh.php :
1: <?php
2: include "koneksi.php";
3: $judul = $_POST['judul'];
4: $isi = $_POST['isi'];
5: $kategori = $_POST['kategori'];
6: $date = date("Y-m-d");
7: echo $judul;
8: echo $isi;
9: echo $kategori;
10: echo $date;
11: if(isset($judul)&&isset($isi)):
12: mysql_query("insert into thread (`judul`,`isi`,`kategori`,`tanggal`) values('$judul','$isi','$kategori','$date')");
13: echo "<script>alert('Post berhasil');location.href='forum.php';</script>";
14: else:
15: echo "<script>alert('data kurang lengkap');location.href='new.html';</script>";
16: endif;
17: ?>
5. pendaftar kompetition
kompetition ini diadakan untuk pengadaan lomba dan data ini tersimpan di table lomba.
dalam tampilan ini ditampilkan :
- nama
- alamat
- ide
untuk menampilkan data dari table menggunakan
source code competition.php :
1: <html>
2: <head>
3: <title>ThemesInPecea</title>
4: <link rel="stylesheet" type="text/css" href="style.css"/>
5: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
6: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
7: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
8: <style type="text/css">
9: .navbar .brand {
10: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
11: font-size: 16px;
12: font-weight: bold;
13: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
14: }
15: </style>
16: </head>
17: <body>
18: <div class="container">
19: <div class="navbar navbar-fixed-top">
20: <div class="navbar-inner">
21: <a class="brand" href="index.html">idea.net</a>
22: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
23: <div class="nav-collapse collapse">
24: <div>
25: <ul class="nav pull-right">
26: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
27: <li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
28: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
29: <li><a href="competition.php"><i class="icon-share"></i>Competition</a></li>
30: </ul>
31: </div>
32: </div>
33: </div>
34: </div>
35: <div class="row kotak-register">
36: <div class="span9">
37: <div class="row-fluid">
38: <div class="span12 kotak-post">
39: <ul class="nav nav-tabs">
40: <li><a href="#info" data-toggle="tab">Info</a></li>
41: <li><a href="#register" data-toggle="tab">Register-Competition</a></li>
42: </ul>
43: <div class="tab-content">
44: <div class="tab-pane active" id="info">
45: <h3>IDEA COMPETITION</h3>
46: <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>
47: <p>List Peserta Idea Competition</p>
48: <table class="table" border="1">
49: <tr bgcolor="#ccFFFF">
50: <td>Nama</td>
51: <td>Email</td>
52: <td>Alamat</td>
53: <td>Ide</td>
54: </tr>
55: <?php
56: include 'koneksi.php';
57: $sql= mysql_query("SELECT *FROM lomba");
58: while ($row = mysql_fetch_object($sql)):
59: ?>
60: <tr>
61: <td><?php echo $row->nama; ?></td>
62: <td><?php echo $row->email; ?></td>
63: <td><?php echo $row->alamat; ?></td>
64: <td><?php echo $row->ide; ?></td>
65: </tr>
66: <?php endwhile;?>
67: </table>
68: </div>
69: <div class="tab-pane" id="register"><div class="span12" align="center">
70: <form method="post" action="simpan.php">
71: <table>
72: <tr>
73: <td>E-mail</td>
74: <td><input type ="text" name="email"><span class="text-error">*</span></td>
75: </tr>
76: <tr>
77: <td>Nama</td>
78: <td><input type ="text" name="nama"><span class="text-error">*</span></td>
79: </tr>
80: <tr>
81: <td>Alamat</td>
82: <td><textarea cols="5" rows="3" name="alamat"></textarea><span class="text-error">*</span></td>
83: </tr>
84: <td>Ide</td>
85: <td><textarea cols="5" rows="3" name="ide"></textarea><span class="text-error">*</span></td>
86: </tr>
87: <td><span class="text-error">*harus diisi</span></td>
88: <td align="right"><input class="btn btn-inverse" type ="submit" value="Register"></td>
89: </tr>
90: </form>
91: </table>
92: </div></div>
93: </div>
94: </div>
95: </div>
96: </div>
97: </div>
98: </div>
99: <!-- Le javascript
100: ================================================== -->
101: <!-- Placed at the end of the document so the pages load faster -->
102: <script src="js/jquery.js"></script>
103: <script src="js/bootstrap-transition.js"></script>
104: <script src="js/bootstrap-alert.js"></script>
105: <script src="js/bootstrap-modal.js"></script>
106: <script src="js/bootstrap-dropdown.js"></script>
107: <script src="js/bootstrap-scrollspy.js"></script>
108: <script src="js/bootstrap-tab.js"></script>
109: <script src="js/bootstrap-tooltip.js"></script>
110: <script src="js/bootstrap-popover.js"></script>
111: <script src="js/bootstrap-button.js"></script>
112: <script src="js/bootstrap-collapse.js"></script>
113: <script src="js/bootstrap-carousel.js"></script>
114: <script src="js/bootstrap-typeahead.js"></script>
115: <script>
116: !function ($) {
117: $(function(){
118: // carousel demo
119: $('#myCarousel').carousel({interval: 2000})
120: })
121: }(window.jQuery)
122: </script>
123: </body>
124: </html>
6. untuk registrasi competition
disini juga disediakan form untuk mendaftar lomba lomba, tampilan sebagai berikut ini :
yang dibutuhkan untuk mengikuti lomba sebagai berikut :
- Nama
- alamat
- ide lomba
untuk menyimpan data ke table
source code simpan.php :
1: <?php
2: include "koneksi.php";
3: $email = $_POST['email'];
4: $nama= $_POST['nama'];
5: $alamat= $_POST['alamat'];
6: $ide= $_POST['ide'];
7: if(isset($_POST['email']) && isset($_POST['nama']) && isset($_POST['alamat']) && isset($_POST['ide'])):
8: mysql_query("insert into lomba (`email`,`nama`,`alamat`,`ide`) values('$email','$nama','$alamat','$ide')");
9: echo "<script>alert('berhasil register');location.href='competition.php';</script>";
10: else:
11: echo "<script>alert('data kurang lengkap');location.href='competition.php';</script>";
12: endif;
13: ?>
7. Tampilan about
tampilan ini dibuat untuk memberitahukan kegunaan forum ini dan juga pembuat forum ini
untuk menampilkan form ini cukup sederhana hanya menggunakan html biasa
source code about.html :
1: <html>
2: <head>
3: <title>ThemesInPecea</title>
4: <link rel="stylesheet" type="text/css" href="style.css"/>
5: <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
6: <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css"/>
7: <link rel="stylesheet" type="text/css" href="css/metro-bootstrap.css"/>
8: <style type="text/css">
9: .navbar .brand {
10: padding: 14px 20px 16px 100px; /* Increase vertical padding to match navbar links */
11: font-size: 16px;
12: font-weight: bold;
13: text-shadow: 0 -1px 0 rgba(0,0,0,.5);
14: }
15: </style>
16: </head>
17: <body>
18: <div class="container">
19: <div class="navbar navbar-fixed-top">
20: <div class="navbar-inner">
21: <a class="brand" href="index.html">idea.net</a>
22: <p style="font-size:10px; position:absolute; top:30px; margin-left:80px">Explore Your Idea Here</p>
23: <div class="nav-collapse collapse">
24: <div>
25: <ul class="nav pull-right">
26: <li><a href="index.html"><i class="icon-home"></i>Home</a></li>
27: <li><a href="forum.php"><i class="icon-list"></i>Forum</a></li>
28: <li><a href="about.html"><i class="icon-user"></i>About</a></li>
29: <li><a href="competition.html"><i class="icon-share"></i>Competition</a></li>
30: </ul>
31: </div>
32: </div>
33: </div>
34: </div>
35: <div class="row kotak-register">
36: <div class="span9">
37: <div class="row-fluid">
38: <div class="span12 forum boc">
39: <h2 class="text-info">ABOUT</h2>
40: </div>
41: <div class="span12 forum-box">
42: <p class="forum-judul"><a href="post2.html">Seputar idea.net</a></p>
43: <p class="forum-isi"> idea.net adalah situs yang menyediakan tempat untuk mengimplementasikan ide-ide anda yang belum bisa terekspresikan<p>
44: <p class="forum-coment"><span class="text-success">Admin : Arif Budiarti<br></span>
45: <span class="text-info">Moderator-1st : Rifky Maulana <br></span>
46: <span class="text-warning">Moderator-2nd : Catur Prasongko <br></span>
47: <span class="text-error">Moderator-3rd : Nuri Priyanto <br></span>
48: <span class="muted">Moderator-4rd : Irvan Nur Aditya <br></span>
49: </p>
50: </div>
51: </div>
52: </div>
53: </div>
54: </div>
55: <!-- Le javascript
56: ================================================== -->
57: <!-- Placed at the end of the document so the pages load faster -->
58: <script src="js/jquery.js"></script>
59: <script src="js/bootstrap-transition.js"></script>
60: <script src="js/bootstrap-alert.js"></script>
61: <script src="js/bootstrap-modal.js"></script>
62: <script src="js/bootstrap-dropdown.js"></script>
63: <script src="js/bootstrap-scrollspy.js"></script>
64: <script src="js/bootstrap-tab.js"></script>
65: <script src="js/bootstrap-tooltip.js"></script>
66: <script src="js/bootstrap-popover.js"></script>
67: <script src="js/bootstrap-button.js"></script>
68: <script src="js/bootstrap-collapse.js"></script>
69: <script src="js/bootstrap-carousel.js"></script>
70: <script src="js/bootstrap-typeahead.js"></script>
71: <script>
72: !function ($) {
73: $(function(){
74: // carousel demo
75: $('#myCarousel').carousel({interval: 2000})
76: })
77: }(window.jQuery)
78: </script>
79: </body>
80: </html>>
Untuk table yang digunakan seperti ini :
1. User
dalam table ini terdapat atribut (username, password,email,alamat,umur)
2. Thread
table ini berisi (id,Judul,Isi,Katagori,Tanggal)
3. Komentar
Table komentar berisikan (id,id_thread,id_user,komentar)
4. Pendaftar lomba
Table berisi (id,Email,Nama,Alamat,Ide).
disitulah database disimpan untuk menjalankan web ini.
mungkin ini saja yang dapat saya sampaikan kali ini.
terimakasih.
