Oktober 2017 ~ Berbagi Tugas

Assalamualaikum.Wr.Wb

kali ini saya akan membagian tugas jsp dengan cuma-cuma atas dasar bahan pembeljaran bagi pembaca.

1. Buat tampilan Index.jsp dengan kodingan sebagai berikut

Tampilan Index

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="STYLESHEET" href="style.css"/>
        <title>Website sederhana</title>
    </head>
    <body>
        <br><br><br>
       <div id="wrap">
            <div id="header">
                <img src="foto/1.png">
                <h1><a>Sistem Informasi Akuntansi</a></h1>
                <h2>AMIK BSI "Bogor" Kampus A</h2>
                <h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
            </div>

        <div id="menu">
            <ul>
                <li><a href="index.jsp">Home</a></li>
                <li><a href="about.jsp">About</a></li>
                <li><a href="exit.jsp">Logout</a></li>
            </ul>
        </div>

            <div id="content">
                <div class="left">
                    <h2>Menu Samping</h2>
                    <ul>
                        <li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
                    </ul>

                </div>

                <div class="right">
                    <table width="100%">
                    <tr>
                        <td valign="top" width="110%">
                    <center>Muhamad Dandi Nursidik
                            <br><br>
                            <img width="300" height="200" src="foto/dandi.JPG"><br>
                            </center>
                            <h2>Selamat Datang..</h2>
                    </center></td>
                    </tr>
                    </table>
                    <div class="footer">
                        © Panggil saja AA . All Rights Reserved.
                    </div>
                </div>
                <div style="clear: both; "> </div>
            </div>
        </div>
    </body>
</html>

2. Selanjutnya buat style.css dengan kodingan sebagai berikut

    * {
    margin: 0;
    padding: 0;
}
table tr td{
    border-color: #663ff ;
}
body{
    background: #0f3030;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    margin: 0 auto;
    }
a{
text-decoration:none;
color: #00b689;
}
a:hover{
      text-decoration: underline;
      color: #ff00ff;
}
#wrap{
    margin: 0 auto;
    width: 965px;
}
#header{
    height: 130px;
    margin: 0 auto;
    width: 965px;
    background-color: #63636e;
    border-radius: 10px 10px 10px 10px;
}
#header h1{
    font-size: 28px;
    letter-spacing: -1px;
    padding: 15px 0 0 20px;
    color: white;
    }
#header h1 a{
    color: white;
    text-decoration: none;
    font-weight: 100;
    letter-spacing: -2px;
    }
#header h1 a:hover{
    color: activecaption;
    }
#header h2{
    font-size: 19px;
    color: white;
    padding: 5px 0 0 20px;
    letter-spacing: -1px;
    font-weight: 100;
    }
#header h3{
    font-size: 13px;
    color: #C1DAD7;
    padding: 5px 0 0 20px;
    letter-spacing: -1px;
    font-weight: 100;
    }
#header img{
    width: 115px;
    height: 115px;
    float: right;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
   }
#menu{
    height: 30px;
    margin: 0 auto;
    width: 965px;
    line-height: 30px;
    background: #fff;
    border-radius: 10px 10px 10px 10px;
}
#menu ul{
    list-style-type: none;
    padding-left: 20px
   }
#menu ul li{
    display: block;
    float: left;
   }
#menu ul li a{
    padding: 0 20px 0 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    color: #228b22;
    padding: 8px 10px 7px 10px;
   }
#menu ul li a:hover{
    color: #222;
    text-decoration: none;
    }
#content{
    background-color: #6c233a;
    padding: 0 10px;
    border-radius: 10px 10px 10px 10px;
    }
.right{
    float: right;
    width: 728px;
    text-align: justify;
    padding-top: 5px;
    font-size: 12px;
    }
.right h2{
    font-size: 18px;
    font-weight: 100;
    padding-left: 285px;
    height: 30px;
    line-height: 30px;
    background: #99fff;
    }
.right h2 a{
    text-decoration: none;
    color: #66000;
    }
.right h2 a:hover{
    color: #33ffcc;
    }
.left{
    float: left;
    width: 206;
    padding-top: 5px;
    }
.left h2 {
    margin: 5px 0 0;
    padding-left: 10px;
    height: 30px;
    background: #353535;
    color: #fffff;
    font-size: 13px;
}
.left ul{
    padding: 10px 0 15px 20px;
    list-style-type: square;
    color: #fff;
}
.left ul li a{
    text-decoration: none; font-weight: 600;
}
.left ul li a:hover{
    color: #ccffcc;
}
.footer{
    text-align: center;
    font-size: 11px;
    color: #fff;
    margin-top: 40px;
    border-top: 1px dotted #aaa;
    padding-top: 10px;
}
.footer a{
    color: red;
    }
footer a:hover{
    color: #ccffcc;
}
.isi td{
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #ffffff;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    color: #006400;
}
.head td{
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    background: #90ee90;
    letter-spacing: 1px;
    padding: 4px 2px 4px 10px;
    color: #000080;
    text-align: center;
    font: 13px "Tahoma",Arial,sans-serif;
   }
.button{
    margin-left: 0;
    padding: 4px 4px;
    border: none;
    background: #E9CF16;
    font-size: 12px;
    color: #ffffff;
    font-family: "Tahoma";
    width: 70px;
   }
.buttonlap{
    margin-left: 0;
    padding: 4px 4px;
    border: none;
    background: #E9CF16;
    font-size: 13px;
    color: #ffffff;
    font-family: "Tahoma";
    width: 100px
   }
.button a:hover{
     background: #90ee90;
   }

3.setelah itu buat about.jsp dengan kodingan sebagai berikut

Tampilan About

Tampilan input nilai

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="STYLESHEET" href="style.css"/>
        <title>Website sederhana</title>
    </head>
    <body>
        <br><br><br>
       <div id="wrap">
            <div id="header">
                <img src="foto/1.png">
                <h1><a>Sistem Informasi Akuntansi</a></h1>
                <h2>AMIK BSI "Bogor" Kampus A</h2>
                <h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
            </div>

        <div id="menu">
            <ul>
                <li><a href="index.jsp">Home</a></li>
                <li><a href="about.jsp">About</a></li>
                <li><a href="exit.jsp">Logout</a></li>
            </ul>
        </div>

            <div id="content">
                <div class="left">
                    <h2>Menu Samping</h2>
                    <ul>
                        <li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
                    </ul>

                </div>

                <div class="right">
                    <table width="100%">
                    <tr>
                        <td valign="top" width="110%">
                        <form action="tampil_nilai.jsp">
                            <h1><center>Silahkan Lengkapi Form dengan Benar</center></h1><br>
                            <hr size="5" color="black">
        </center>
        <pre>
        <form method="get">
            Nama Siswa          : <input type="text" name="nama" /><br>
            Kota Lahir          : <input type="text" name="kota" /><br>
            Tanggal Lahir       : <input type="text" name="tgl" value="hh/bb/tttt" /><br>
            Alamat              :
                                  <textarea name="alamat" rows="5" cols="30">
                                  </textarea> <br>
            Hobi                : <input type="checkbox" name="hobi" value="Olahraga"> Olahraga
                                  <input type="checkbox" name="hobi" value="Membaca"> Membaca
                                  <input type="checkbox" name="hobi" value="Tidur"> Tidur
            <br>
            <input type="submit" value="Submit"><input type="reset" value="Ulang">
            </pre>
        </form>
                        </td>
                        </tr>
                    </table>
                    <div class="footer">
                                © Panggil Saja AA. All Rights Reserved.
                    </div>
                </div>
                <div style="clear: both; "> </div>
            </div>
        </div>
    </body>
</html>

5. langkah kelima buat Tampilannyaa untuk memanggil inputan processing yang telah di buat tadi dengan nama tampilan_nilai.jsp

image tampilan nilai

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="STYLESHEET" href="style.css"/>
        <title>Website sederhana</title>
    </head>
    <body>
        <br><br><br>
       <div id="wrap">
            <div id="header">
                <img src="foto/1.png">
                <h1><a>Sistem Informasi Akuntansi</a></h1>
                <h2>AMIK BSI "Bogor" Kampus A</h2>
                <h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
            </div>

        <div id="menu">
            <ul>
                <li><a href="index.jsp">Home</a></li>
                <li><a href="about.jsp">About</a></li>
                <li><a href="exit.jsp">Logout</a></li>
            </ul>
        </div>

            <div id="content">
                <div class="left">
                    <h2>Menu Samping</h2>
                    <ul>
                        <li><a href="input_nilai.jsp">Latihan Form Processing</a></li>
                    </ul>

                </div>

                <div class="right">
                    <table width="100%">
                    <tr>
                        <td valign="top" width="110%">
               <%
        String tNama = request.getParameter("nama");
        String tKota = request.getParameter("kota");
        String tTgl = request.getParameter("tgl");
        String tAlamat = request.getParameter("alamat");
                %>
                <br>
                    <center>
                        <h3>Hasil Yang Telah Anda input </h3>
                        <br>
        <table border="1">
        <tr>
            <td width="200px">Nama Siswa</td>
            <td width="10px">-></td>
            <td width="200px">   <% out.println(tNama); %> </td>
        </tr>
        <tr>
            <td>Kota Lahir</td>
            <td>-></td>
            <td>   <% out.println(tKota); %></td>
        </tr>
        <tr>
            <td>Tanggal Lahir</td>
            <td>-></td>
            <td>   <% out.println(tTgl); %></td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td>-></td>
            <td>   <% out.println(tAlamat); %></td>
        </tr>
        <tr>
            <td>Hobi</td>
            <td>-></td>
            <td>   <%
                String[] authors = request.getParameterValues("hobi");
                    if (authors != null) {
               %>
               <%
                    for (int i=0 ; i< authors.length; ++i)
                {
                %>
                <br>
                <%= authors[i]%></br>
                <% } %>
                <% } %>            </td>
        </tr>
        </table><br>

                <h3>Kembali Input?</h3><a href= "input_nilai.jsp">Klik</a>
                        </td>
                        </tr>
                    </table>
                    <div class="footer">
                        © Panggil Saja AA 2017. All Rights Reserved.
                    </div>
                </div>
                <div style="clear: both; "> </div>
            </div>
        </div>
    </body>
</html>

6. terakhir buat exit.jsp

tampilan exit

Sekian Terimaksih

Tinggalkan komentar anda

Salam AA

asaalamualaikum warohmatulohi wabarokatuh

di samping sih di samping
tapi teu make sempak
ka kuping si kakuping
tapi kurang kompak

solawat sertasalam marikita panjatkan ke hadirat allah

sekian pembukaan

kembali lgi dengan aa di berbagi tugas sederhana yang insallah bermanfaat yaa hehehe
langsung ajaa nih sedot gan semoga lancar dan tidak error

index.jsp
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="STYLESHEET" href="newcss.css"/>
        <title>JSP Page</title>
    </head>
    <body>
       <div id="wrap">
            <div id="header">
                <img src="bsi bunder.png">
                <h1><a>Sistem Informasi Akuntansi</a></h1>
                <h2>AMIK BSI "Bogor" Kampus A</h2>
                <h2>Jl. Merdeka No.168 Telp.08561996551 Bogor</h2>
            </div>

        <div id="menu">
            <ul>
                <li><a href="index.jsp">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Logout</a></li>
            </ul>
        </div>

            <div id="content">
                <div class="left">
                    <h2>Master Data</h2>
                    <ul>
                        <li><a href=" ">Akun</a></li>
                        <li><a href=" ">Saldo Awal</a></li>
                        <li><a href=" ">User</a></li>
                        <li><a href=" ">Periode Akuntansi</a></li>
                    </ul>

                    <h2>Transaksi</h2>
                    <ul>
                        <li><a href="">Kas Masuk</a></li>
                        <li><a href="">Kas Keluar</a></li>
                        <li><a href="">Jurnal Umum</a></li>
                    </ul>

                    <h2>Informasi Data</h2>
                    <ul>
                        <li><a href="">Informasi Akun</a></li>
                        <li><a href="">Informasi User</a></li>
                        <li><a href="">Informasi Kas Kelaur</a></li>
                        <li><a href="">Informasi Kas Masuk</a></li>
                        <li><a href="">Data Jurnal Umum</a></li>
                    </ul>
                </div>

                <div class="right">
                    <table width="100%">
                    <tr>
                        <td valign="top" width="110%">
                                <%-- isi dari content sebelah kanan --%>
                        </td>
                        </tr>
                    </table>
                    <div class="footer">
                        Support by
                    </div>
                </div>
                <div style="clear: both; "> </div>
            </div>
        </div>
    </body>
</html>

dan ini cssnya

style.css

* {
    margin: 0;
    padding: 0;
}
table tr td{
    border-color: #663ff ;
}
body{
    background: #ff9966;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #ffcc33;
    margin: 0 auto;
    }
a{
text-decoration:none;
color: #66CCff;
}
a:hover{
      text-decoration: underline;
      color: #ff00ff;
}
#wrap{
    margin: 0 auto;
    width: 965px;
}
#header{
    height: 130px;
    margin: 0 auto;
    width: 965px;
    background: #ff399;
    }
#header h1{
    font-size: 28px;
    letter-spacing: -1px;
    padding: 15px 0 0 20px;
    color: #fff;
    }
#header h1 a{
    color: #99ffff;
    text-decoration: none;
    font-weight: 100;
    letter-spacing: -2px;
    }
#header h1 a:hover{
    color: activecaption;
    }
#header h2{
    font-size: 19px;
    color: #C1DAD7;
    padding: 5px 0 0 20px;
    letter-spacing: -1px;
    font-weight: 100;
    }
#header h3{
    font-size: 13px;
    color: #C1DAD7;
    padding: 5px 0 0 20px;
    letter-spacing: -1px;
    font-weight: 100;
    }
#header img{
    width: 115px;
    height: 115px;
    float: right;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
   }
#menu{
    height: 30px;
    margin: 0 auto;
    width: 965px;
    line-height: 30px;
    background: #66cc66;
   }
#menu ul{
    list-style-type: none;
    padding-left: 20px
   }
#menu ul li{
    display: block;
    float: left;
   }
#menu ul li a{
    padding: 0 20px 0 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    color: #228b22;
    padding: 8px 10px 7px 10px;
   }
#menu ul li a:hover{
    color: #222;
    text-decoration: none;
    }
#content{
    background-color: #d3fd9d;
    padding: 0 10px;
    }
.right{
    float: right;
    width: 745px;
    text-align: justify;
    padding-top: 5px;
    font-size: 12px;
    }
.right h2{
    font-size: 18px;
    font-weight: 100;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    background: #99fff;
    }
.right h2 a{
    text-decoration: none;
    color: #66000;
    }
.right h2 a:hover{
    color: #33ffcc;
    }
.left{
    float: left;
    width: 180px;
    padding-top: 5px;
    }
.left h2 {
    margin: 5px 0 0;
    padding-left: 10px;
    height: 30px;
    background: #ff3399;
    color: #fffff;
    font-size: 13px;
}
.left ul{
    padding: 10px 0 15px 20px;
    list-style-type: square;
    color: #99ccff;
}
.left ul li a{
    text-decoration: none; font-weight: 600;
}
.left ul li a:hover{
    color: #ccffcc;
}
.footer{
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin-top: 40px;
    border-top: 1px dotted #aaa;
    padding-top: 10px;
    }
.footer a{
    color: red;
    }
footer a:hover{
    color: #ccffcc;
}
.isi td{
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    background: #ffffff;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 8px;
    padding-right: 8px;
    color: #006400;
}
.head td{
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    background: #90ee90;
    letter-spacing: 1px;
    padding: 4px 2px 4px 10px;
    color: #000080;
    text-align: center;
    font: 13px "Tahoma",Arial,sans-serif;
   }
.button{
    margin-left: 0;
    padding: 4px 4px;
    border: none;
    background: #E9CF16;
    font-size: 12px;
    color: #ffffff;
    font-family: "Tahoma";
    width: 70px;
   }
.buttonlap{
    margin-left: 0;
    padding: 4px 4px;
    border: none;
    background: #E9CF16;
    font-size: 13px;
    color: #ffffff;
    font-family: "Tahoma";
    width: 100px
   }
.button a:hover{
     background: #90ee90;
   }

catatan:

edit lagi ya baik dari warna maupun konten dan sebagainya agar tidak terlalu mirip dengan yang di bagi oleh aa.Terimakasih.

Sekian Terimakasih

tinggalkan komentar jika ingin bertanya

dan terimakasih untuk pihak yang telah membantu

wasalam

https://drive.google.com/file/d/16niffgEYmfF-i3OYLWu_V5zfBWzqtbE8/view?usp=sharing

Berbagi Tugas

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Selasa, 10 Oktober 2017

Tugas Form Processing ( pemrograman visual akuntansi 1 )

Selasa, 03 Oktober 2017

Tugas pemrograman visual akuntansi 1

dan ini cssnya

Mengenai Saya

Arsip Blog

Blog Archive

blogger

About