[Pemprograman Berbasis KK] Tugas 1

Nitama Nurlingga Yotifa
05111740000059

Aplikasi Desktop Menggunakan Electron

Hasil Akhir

Source Code

1. mainWindow.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <title>Biodata</title>  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <h1>My Biodata</h1>  
   <div class="container cf">  
     <div class="main">  
       <table>  
         <thead>  
         </thead>  
         <tbody>  
           <tr>  
             <td>Nama</td>  
             <td>Nitama Nurlingga Yotifa</td>  
           </tr>  
           <tr>  
             <td>Alamat</td>  
             <td>Perumahan Bumi Madina Asri, Mulyorejo, Surabaya</td>  
           </tr>  
           <tr>  
             <td>Asal Sekolah</td>  
             <td>SMA Negeri 1 Purworejo</td>  
           </tr>  
           <tr>  
             <td>Email</td>  
             <td>nurlingganitama@gmail.com</td>  
           </tr>  
           <tr>  
             <td>blog</td>  
             <td>nitamanurlingga.blogspot.com</td>  
           </tr>  
           <tr>  
             <td>No HP</td>  
             <td>085735662849</td>  
           </tr>  
         </tbody>  
       </table>  
     </div>  
     <div class="sidebar">  
       <img src="img/foto.jpg" alt="Nitama Nurlingga Yotifa">  
     </div>  
   </div>  
 </body>  
 </html>

2. style.css

 body{  
   background-image: url(img/background.png);  
   background-repeat: repeat;  
 }  
 h1{  
   text-align: center;  
   /* font-family: 'Pacifico', cursive; */  
   color: rgb(127, 199, 175);  
   font-size: 50px;  
   font-weight: bold;  
 }  
 tr{  
   height: 30px;  
 }  
 td{  
   padding: 10px;  
   font-family: 'PT Sans', sans-serif;  
   font-size: 18px;  
   color: white;  
 }  
 .container{  
   padding: 30px;  
   width: 900px;  
   background-color: rgb(127, 199, 175);  
   border: 5px solid white;  
   margin: auto;  
   position: relative;  
   box-sizing: border-box;  
 }  
 img{  
   width: 250px;  
   border-radius: 10px;  
 }  
 .main {  
   float: left;  
 }  
 .sidebar{  
   float: right;  
 }  
 /* micro clearfix */  
 .cf:before,  
 .cf:after {  
   content: " "; /* 1 */  
   display: table; /* 2 */  
 }  
 .cf:after {  
   clear: both;  
 }  
 .cf {  
   *zoom: 1;  
 }

3. main.js

 const electron = require('electron');  
 const url = require('url');  
 const path = require('path');  
 const {app, BrowserWindow} = electron;  
 let mainwindow;  
 // listen for app to be ready  
 app.on('ready', function(){  
   // create new window  
   mainwindow = new BrowserWindow({});  
   // load html into window  
   mainwindow.loadURL(url.format({  
     pathname: path.join(__dirname, 'mainWindow.html'),  
     protocol: 'file:',  
     slashes: true  
   }));  
 });

Komentar

Posting Komentar

Postingan populer dari blog ini

[Pemprograman Berbasis KK] Tugas 3

Gambar
Nitama Nurlingga Yotifa 05111740000059 Pengenalan Framework Code Igniter [2] Menggunakan Template Bootstrap SBAdmin dan Mengenal Model dan CRUD Overview <!DOCTYPE html> <html lang="en"> <head> <?php $this->load->view("admin/_partials/head.php") ?> </head> <body class="sb-nav-fixed"> <?php $this->load->view("admin/_partials/navbar.php") ?> <div id="layoutSidenav"> <?php $this->load->view("admin/_partials/sidebar.php") ?> <div id="layoutSidenav_content"> <main> <div class="container-fluid"> <h1 class="mt-4">Dashboard</h1> <ol class="breadcrumb mb-4"> <li class="breadcrumb-item active">Dashboard</li...
Baca selengkapnya

Tugas #PBOA-tugas 6 (Auction)

Gambar
AUCTION Untuk membuat sistem lelang (Auction) menggunakan empat class, yaitu : Person Bid Lot Auction Berikut adalah souce code yang digunakan : Person /** * Maintain details of someone who participates in an auction. * @author Nitama Nurlingga Yotifa. * @version 20181007 */ public class Person { // The name of this person. private final String name; /** * Create a new person with the given name. * @param name The person's name. */ public Person(String name) { this.name = name; } /** * @return The person's name. */ public String getName() { return name; } } Bid /** * A class that models an auction bid. * It contains a reference to the Person bidding and the amount bid. * * @author Nitama Nurlingga Yotifa. * @version 20181007 */ public class Bid { // The person making the bid. private final Per...
Baca selengkapnya

Tugas #PBOA-tugas 9 (The foxes and Rabbits Simulator)

Gambar
The foxes and Rabbits Simulator Untuk membuat simulator foxes and rabbits diperlukan sejumlah class sebagai berikut : Counter Field FieldStat Fox Location Rabbits Randomizer Simulator SimulatorView Berikut source code yang digunakan : Counter import java.awt.Color; /** * Write a description of class Counter here. * * @author (Nitama Nurlingga Yotifa) * @version (20181119) */ /** * Provide a counter for a participant in the simulation. * This includes an identifying string and a count of how * many participants of this type currently exist within * the simulation. * */ public class Counter { // A name for this type of simulation participant private String name; // How many of this type exist in the simulation. private int count; /** * Provide a name for one of the simulation types. * @param name A name, e.g. "Fox". */ public Counter(String name) ...
Baca selengkapnya