Making and testing app

How to making and testing application

Introduction

In This Tutorial we show haow Making application with test

What you need is everything to make an application:

  • Unzip the zip file and insert it on the server with MySql database (Wamp. Xamp, Lamp)
  • Editor (Atom, Visual Studio Code,...)
  • FrontEnd
  • BackEnd

    • Below I will show you how to make and use through the code.

    Launch

    Here we will show you the steps on how to start your website with the admin panel (FrontEnd and BackEnd)

    • 1. download one of the "Apache HTTP" servers with "MySkl"
    • 2. Run MySql via localhost with "PHPMyAdmin" http://localhost/phpmyadmin/
    • 3. In PHPMyAdmin click on Database and row Create database put name of your database. That's how you created the base
    • 4. In the created database it is necessary insert an already finished base or make tables and columns
    • 5. If you don't have a ready-made database, then go first to your created database, then enter the name of the table in the NAME field and after how many columns your table will have. Example table name TEST number of columns 4. It is very important that when you create columns priva you have some ID that will be the primary key and that AUTO_INCREMENT
    • 6. You also need a connection to the base in a special example: chonfig.php

      • Example for conection with database in chonfig.php

      
<?php
$server = "localhost";
$user = "root";
$password = "root";
$base = "energy_cms";
$conection = mysqli_connect($server, $user, $password, $base);
?>
    • 7. Run your website or application via localhost Example: http://localhost/your_website

    By following these steps, you have created a database, linked your site to the database, and launched your site

    The next steps are from yours, Have you created a login page for logging in or a blog where you can immediately write or chat,...

    FrontEnd

    FrontEnd is an integral part of every website. FrontEnd displays everything the user needs to see (login, register, post, comment, ..). FrontEnd can be as separate as a plain HTML page. You can add CSS for a nicer look and JavaScript for functionality. FrontEnd can be without BackEnd.

    An example for FrontEnd just took our BLOG temples. On our BLOG template you can see the following:

    • Header (with the title of your website and subtitle (slogan))
    • Menu with link (but you don't have to put links)
    • Center here it can still be, forum or blog post, chat,... now in our case it is a simple text.
    • Right with links (here you can find a place for logging in, registration, statistics of various categories,...)
    • Footer (which can contain as in our case copyright and year but can also be blank or something else to put, what you think you should)

    Examples of our templates that we made for frontend and backend and which are open source and download can be found here:

    Too here you can find more details about our frontend tempaltes with a description of the code

    FronEnd template

    BackEnd template

    you need CSS where you can copy and paste here:

    Code for FrontEnd

                
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title website</title>
<link rel="shortcut icon" href="http://www.your_webiste.com/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css">
<link rel="stylesheet" href="http://www.sensationenergy.com/se_css/se_css.css_1">
<link rel="stylesheet" href="../css/moj1.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<style>
.raspon_1_of_2{
width: 33.4%;
}
@media only screen and (max-width:480px) {
.raspon_1_of_2 {
width: 100%
}
}
</style>
</head>
<body>
<div class="zaglavlje">
<h1>Template 3</h1>
<h2>Blog - Example</h2>
</div>
<nav class="gornji_meni">
<a href="#" class="toggle"><i class="fa fa-reorder"></i></a>
<div class="left">
<a href="basic_template.php"  class="link">Home</a>
<a href="#"  class="link">Link 1</a>
<a href="#"  class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
<a href="#"  class="link">Link 4</a>
</div>
<div class="right">
<a href="#"  class="link">Link 5</a>
</div>
</nav>
<br>
<div class="sekcija2 grupa2">
<div class="colona2 raspon_2_of_2">
<div align="center">
<h2>Center</h2>
</div>
<div class="card">
<p>  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<br>
<p>  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<div class="colona2 raspon_1_of_2">
<div align="center">
<h2>Right</h2>
</div>
<div class="card">
<ul>
<li>  <a href="#"  class="link">Link 1</a></li>
<li>  <a href="#"  class="link">Link 2</a></li>
<li>  <a href="#" class="link">Link 3</a></li>
<li>  <a href="#"  class="link">Link 4</a></li>
</ul>
</div>
</div>
</div>
<br>
<div class="footer">
Copyright @ Template 1
2023. All Rights Reserved.
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="../js/moj.js"></script>
</body>
</htm>

    BackEnd

    BackEnd is a part of the website in which you control the website or have various other functionalities that allow you to work better on your site or FrontEnd. In most cases, the BackEnd is connected to the base (MySql, JSON, XML, MSSQL,...). BackEden will most often be called "Admin dashboard" or "Admin panel".

    The content that the BackEnd should contain are:

    • Website settings (website name, title, sub title, fav ico, ..)
    • Users (here you can add, delete edit user)
    • Menu (here you can add, delete and edit munu, if also sub menu)
    • if you want plugins and theme for your webiste
    • Edir or add title on Header and Footer
    • And many other functionalities

    As we said in the fontend you can use our backpack admin template.

    An example can be found at this address: This is an example with login.

    Example for Admin panel with login

    Example code part for BackEnd

    This part of the code belongs to the chat from the example above. Details and description of the code can be found at the following address:

    Template Documentation

    Simple example of login and conection

    login.php

    
<?php
//Details and a description of the code can be found in the Admin Template tutorial
session_start();
require 'conection.php';
if (isset($_POST['login'])) {
$password = $_POST['password'];
$user = $_POST['user'];
$upit = "SELECT * FROM users WHERE user = '$user' AND password = '$password'";
$pokretanje_upita = mysqli_query($conection, $upit);
$row=mysqli_num_rows($pokretanje_upita);
$row=mysqli_fetch_assoc($pokretanje_upita);
$role=$row['role'];
$_SESSION['user']=$user;
$_SESSION['role']=$role;
if($role=='admin'){
header('location:home.php');
}
}
?>

    conection.php

    
<?php
//Details and a description of the code can be found in the Admin Template tutorial
$server = "localhost";
$user = "root";
$password = "root";
$base = "example"
$conection = mysqli_connect($server, $user, $password, $base);
?>

    GET & POST method

    GET & POST method serves to send data to a web server.

    You can find an example of the GET & POST method on the main page of the tutorial index.php Tutorials

    A complete ttutrial with explanation and crud can be found on the Function 7 & Grid Exmple page. Here you can also find examples for the GET and POST method. Function 7 & Grid

    GET method

    The GET method sends data and adds a request to the page. The best example is CRUD. when you want to do EDIT or DELETE, for example, you send a value via ID, and on the edit.pgp page, "catch" the value for ID.

    Example below, indes. we send the value of ID to example 1. id = 1. On the edit.php page we capture this unit we sent so again the id will have a value of 1 id = $ _GET ['1']; and there is a match "1 = 1"

    Example index.php

    
<a href="edit.php?id=<?php echo $id; ?>"><button class="btn-2">Edit</button></a>

    Example edit.php

    
<?php
$id = $_GET['id'];
?>

    POST method

    POST method transfers information via HTTP.

    An example of the POST method is on the edit page when you have caught id 1 from the previous example you are listed for example where all the information related to id 1 SELECT * FROM user WHERE id = $ id. That is, where is the id from the database which is 1 and $ id when we caught the GET method and it is also 1.

    In this case, we will use the POST method when we want to edit, for example, the user and his name on the edit.php page, so we use the POST method. $ name = $ _POST ['name']; This POST method is important because you intrude in this case or when we add for example the user to the inster into. Update example $ result = mysqli_query ($ chon, "UPDATE user SET name = '$ name' WHERE id = $ id"); Here we have taken from the forum that needs to be changed, we do it using the POST method and the ID serves us to match the id from the database and the GET method.

    Example edit.php

    
require 'con.php';
$id = $_GET['id'];
$q= "SELECT * FROM user WHERE  id = $id";
$s = mysqli_query($con, $q);
while ($row = mysqli_fetch_assoc($s)) {
$id = $row['id'];
$name = $row['name'];
}
if (isset($_POST['edit'])) {
$name = $_POST['name'];
$result = mysqli_query($con, "UPDATE user SET name='$name' WHERE id=$id");
}
?>
<form action="" method="post" enctype="multipart/form-data">
<label>Name</label>
<input type="text" name="name" value="<?php echo $name; ?>">
<input type="submit" name="edit" value="Edit">
</form>

    Documentation




    Answer the following question:

    You must be logged in



    WE USE COOKIES Introduction. BeSafe works to protect your privacy when you use our services.

    More Info