Nama 2

Nama : Bramastha Attila noval
NRP : 191131011
JAWABAN RESPONSI PRAKTIKUM PEMROGRAMAN WEB
1. Buatlah 2 tampilan Home dan Tambah Transaksi pada Sistem Informasi Keuangan
Kodingan Tampilan Home :
1. <html>
2. <title>Uangku - Solusi Pencatatan Keuangan Anda</title>
3. <center> <h1>Uangku</h1> </center>
4. <center> <h2>Home</h2> </center>
5.
6. <table align="left" rules="none" cellpadding="35" width="300 px" border="1" >
7. <tbody>
8.
9. <tr><td><center>Rangkuman</center></td></tr>
10. <tr><td><center>Total Uang</center></td></tr>
11. <tr><td><center><font color="blue"> Rp. 1.289.000</font></td></center></tr><br>
12. <tr><td><center>Total Pemasukan</center></td></tr>
13. <tr><td><center><font color="green"> Rp. 989.000</font></center></td></tr>
14. <tr><td><center>Total Pengeluaran</center></td></tr>
15. <tr><td><center><font color="red"> Rp. 400.000</font></center></td></tr>
16.
17. </tbody></table>
18. <head>
19. <style>
20. caption {
21. display: table-caption;
22. text-align: left;
23. }
24. </style>
25. </head>
26. <td></td>
27. <table align="Center" border="1" cellpadding="30" cellspacing="0">
28.
29. <caption><h4>Data Transaksi Keuangan</h4></caption>
30. <tbody>
31. <tr><th>No</th><th>Jenis</th><th>Jumlah</th><th>Tanggal</th><th>Deskripsi</th></tr>
32. <tr><td>1</td><td>Pemasukan</td><td>100.000</td><td>12 April 2020</td><td>Honor Asisten
si</td></tr>
33. <tr><td>2</td><td>Pemasukan</td><td>400.000</td><td>19 April 2020</td><td>Sangu Bulanan
</td></tr>
34. <tr><td>3</td><td>Pengeluaran</td><td>60.000</td><td>20 April 2020</td><td>Pulsa Kuota
30GB</td></tr>
35. <tr><td>4</td><td>Pengeluaran</td><td>60.000</td><td>21 April 2020</td><td>Ganti Oli Se
peda Motor</td></tr>
36. <tr><td>5</td><td>Pemasukan</td><td>300.000</td><td>23 April 2020</td><td>Gaji Freelanc
e</td></tr>
37. <tr><td>6</td><td>Pengeluaran</td><td>250.000</td><td>27 April 2020</td><td>Service Pri
nter</td></tr>
38. </tbody></table>
39.
40.
41. </style>
42. <form action="file:///D:/BelajarHTML/Responsi/TambahTransaksi.html">
43. <input text type="submit" class="simpan" value="Tambah Transaksi">
44. </form>
45. </html>
Kodingan Tampilan Tambah Transaksi :
1. <html>
2. <head>
3. <title>Uangku - Solusi Pencatatan Keuangan Anda</title>
4. <link rel="stylesheet" type="text/css" href="style.css">
5. <br>
6. <center><h1>Uangku</h1>
7. <h3>Transaksi | Tambah Transaksi</h3>
8. <body>
9. <fieldset>
10. Tanda <span class="required">*</span> Wajib Diisi
11. <p>Jenis Transaksi
12. <select name='Jenis Transaksi'>
13. <option value='Pemasukan'>Pemasukan</option>
14. <option value='Pengeluaran'>Pengeluaran</option>
15. </select>
16. </p>
17. <div class="grup">
18. <label for="Jumlah Uang">Jumlah Uang<span class="required">*</span></label>
19. <input type="Jumlah Uang" name="Jumlah Uang">
20. </div>
21.
23. <label for="Tanggal Transaksi">Tanggal Transaksi<span class="required">*</span></label
>
24. <input type="date" name="tanggal">
26. <label for="Deskripsi">Deskripsi<span class="required">*</span></label>
27. <input type="textarea" name="tujuan" rows="30" cols="15">
28. </div>
29. <br>
30. <br>
31. <div class="grup-offset">
32. <button type="submit" value="Sign In">Submit</button>
33. </div>
34. </fieldset>
35. <div class="footer">
36. </div>
37. </form>
38. </div>
39. </div>
40. <br>
41. </center>
42. </body>
43.
44. </html>
CSS Tampilan Transaksi :
1. body{
2. background-image: url(green.jpg);
3. width: 500px;
4. height: 300px;
5. margin: 10 auto;
6. opacity: 0.9;
7. border: #00868b;
8. margin-top: -20px;
9. box-sizing: 50px;
10. }
11. .konten{
12. background:#556b2f;
13. border: #00868b;
14. width: 360px;
15. margin: 30px auto 0;
16. border-radius: 16px;
17. overflow: hidden;
18. }
19. .kepala{
20. background: #1a1a1a;
21. padding: 7px 7px;
22. height: 40px;
23. }
24. .lock{
25. display: inline-block;
26. width: 20px;
27. height: 10px;
28. margin-top: 10px;
29. float: center;
30. margin-right: 40px;
31. border: #00868b;
32. }
33. .judul{
34. color: #ffffff;
35. font-weight: 20px;
36. line-height: 10px;
38. }
39. .artikel{
40. padding:10px 15px;
41. color: #ffffff;
43. }
44. .grup{
45. margin: 7px 0;
46. }
47. .grup label,
48. .grup input,
49. .grup button{
50. display: block;
51. }
52. .grup label{
54. font-size: 15px;
55. text-align: center;
56. margin: 0 0.2em;
57. margin-bottom: 7px;
58. }
59. .grup input[type="Jumlah Uang"],
60. .grup input[type="bramasta"]{
61. width: 300px;
62. height: 30px;
63. padding: 0 10px;
64. background: #cccccc;
65. border: #000000;
67. color: #1a1a1a;
68. }
69. .grup input[type="textarea"]{
70. width: 187px;
71. height: 50px;
72. background: #cccccc;
73. border: #000000;
75. color: #1a1a1a;
76. float: right;
78. margin-bottom: 10px;
79. text-align: center ;
80. }
81. .grup button[type="radio"]{
82. margin: 80px;
84. float: left;
85. }
86. .grup button[type="submit"],
87. .grup button[type="reset"] hover{
88. background: #00868b;
89. border: 2px solid #00e5ee;
90. float: left;
92. color: #ffffff;
93. cursor: pointer;
94. }
95. .required{
96. color: red;
97. font-weight: normal;
98. }
99. .footer{
100. padding: 3px;
101. color: #ffffff;
102. height: 30px;
103. margin-left: 30px;
104. margin-bottom: :-40px;
105. margin-top: -20px;
106. }

Nama 2

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Nama 2

Uploaded by

Copyright:

Available Formats

Nama : Bramastha Attila noval

Kodingan Tampilan Home :

Kodingan Tampilan Tambah Transaksi :

You might also like