MDAD: LAB 1: Mobile Web Application 1 [Html, AVD, Wamp Server, CSS]

LAB 1: Mobile Web Application 1 [Html, AVD, Wamp Server, CSS]

Objective: To develop and display mobile web pages on the Android emulator

Part 1 Setup of Wamp or XAMPP Server, HTML & CSS

#1 Install Wamp Server

WAMP Server (411 MB) for PHP and MySQL (database)

VERSION 3.1.0

https://download.cnet.com/WampServer-64-Bit/3000-10248_4-75544590.html

If Wamp Server does not work on your machine
use XAMPP server instead

https://www.apachefriends.org/index.html

Part 3: Create html and css files

Goto c:\wamp64\www

Create a sub folder called products, all html, PHP pages are to be saved in this folder

Another subfolder, css and images are created to store css files and

Image files respectively.

Let’s get started with creating a main.html page

(1) Download smartfarm.jpg from the picture below:

(2) Save it in c:\wamp64\www\products\images
(3) Create a main.html page with a notepad

<html>
<head>

<!--Link to an External Style Sheet -->

 <style>

  </style>
</head>

<body>
<h1> Smart Farming </h1>
<div align="center">
<img src="images/smartfarm.jpg" width="30%" height="30%"><br>
</div>

</body> 
</html>

(4) Save main.html in c:\wamp64\www\products
(5) Start WampServer if you have not started it
(6) Goto Chrome Browser type localhost/products/main.html

(7) Find your IPAddress

Go Windows>start>cmd> Type ipconfig

(8) Goto Chrome Browser type YourIPAddress/products/main.html

E.g. 172.226.146.33/products/main.html

If you are able to see the page above means you have

Installed Wamp server successfully and

You know where to place the files in the server (c:\wamp64\www\products)

And know how to access the files via the client (Chrome browser)

E.g. 172.226.146.33/products/main.html

CSS (Cascading Style Sheets)

is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.

We will be looking at:

· External Style Sheet
· Internal Style Sheet
· styles to Individual Elements

1) Create a css file , named myStyle.css with the following codes and saved it in the css folder
c:\wamp64\www\products\css

li {
        display:inline-block;
        background:yellow;
        color:blue;
        margin-right:10px;
}

2) Create a css file , named myStyle.css with the following codes and saved it in the css folder c:\wamp64\www\products\css

Edit main.html

Paste the following inside the <div> tag

<ul>
    <li><a href="get_all_products.php"> List all products </a>  </li>
    <li><a href="addProduct.php"> Add Product </a>  </li>
    <li><a href="searchProduct.php"> Search Product </a>  </li>
</ul>

2) Linking main.html to external style sheet myStyle.css
Add this line inside the <head> Tag of main.html

<link href="css/myStyle.css" rel="stylesheet" type="text/css"/>

3) Applying internal style sheet on main.html
Type the following inside the <head> Tag of main.html

<style>
.center {

    font-family: verdana;
    font-size: 30px;
    text-align: center;
    color: red;
}

</style>

Type the following in the <h1> tag to apply internal css on <h1> tag

  <h1 class ="center" > Smart Farming </h1>

4) Applying styles to Individual Elements on main.html

Type the following in the <body tag> to set the background color to green (RGB)

<body bgcolor="#00FF00">   <!--styles to Individual Elements-->

Part 2 Setup of Android Studio

Download the latest version

https://developer.android.com/studio/

If your notebook pc encountered problem with the latest version,

MDAD

LAB 1: Mobile Web Application 1 [Html, AVD, Wamp Server, CSS]

No comments:

Post a Comment