[HTML & PHP & CSS & MYSQL] Agenda Telefonica

D4N1EL · August 30, 2016

Descriere: Am creat o "agenda" pentru telefon. Este bazata pe mysql. Este ceva putin simplu dar si complicat pentru un incepator. Cum pot avea si eu MySql? Simplu! Instalezi XAMPP ( https://www.apachefriends.org/ro/download.html), este cel mai simplu program. (localhost/phpmyadmin).

Poze / Video:

Link download: Attach File

Alte precizari: Este facut de mine... In continuare o sa vedeti ce contine + tutorialul de "asamblare". Programul folosit de mine pentru editarea fisierelor este Microsoft Visual Studio Code ( https://code.visualstudio.com/download )

Codurile din fisiere:
action.php

<?php
session_start();
require_once("conect.php");
 
if ($_POST['register_name'] != "" && $_POST['register_number'] != "") {
 
    $name = $_POST['register_name'];
    $number = $_POST['register_number'];
 
    $query = "INSERT INTO `agenda` (`nume`,`telefon`) VALUES ('".$name."','".$number."')";
    $result = mysql_query($query) or die ( "<title>Error</title>Error : ". mysql_error() );
 
    if ($result) {
echo "<!DOCTYPE html>
<html>
<head>
<style>
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
 
  border-top: 16px solid black;
 border-bottom: 16px solid black;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
body{
    background: url('0.jpg');
}
</style>
</head>
<body onload='myFunction()' style='margin:0;'>

<div id='loader'></div>

<div style='display:none;' id='myDiv' class='animate-bottom'>
  <h2>Numarul a fost adaugat cu succes!</h2>
  <p>Apasa <a href='index.php'>aici</a> pentru a vizualiza agenda.</p>
  <title>Numar Adaugat!</title>
</div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById('loader').style.display = 'none';
  document.getElementById('myDiv').style.display = 'block';
}
</script>

</body>

</html>";
    }
}
?>

conect.php

<?php
$host = "localhost";
$user = "root";
$pass = "";


mysql_connect($host, $user, $pass) or die (mysql_error ());
mysql_select_db("carte_telefon") or die(mysql_error());
$select = "SELECT * FROM agenda";
mysql_query($select);
?>

index.php

<!DOCTYPE html>
<html>
<head>
<?php
require_once('conect.php');
?>
<title>
Carte de Telefon
</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h2 style="text-align: center;">Carte de telefon</h2><br /><br />

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cauta contact" title="Scrie un nume!"><br /><br /><br />
<table id="myTable">
<tr class="header">
    <th style="width:60%;">Nume</th>
    <th style="width:40%;">Telefon</th>
    <th style="width:20%;">ID</th>
  </tr>
 
    
 <?php
$comanda = "SELECT * FROM agenda";


$rezultat = mysql_query($comanda);


while($row = mysql_fetch_array($rezultat))
echo  '<tr> <td>' . $row['nume'] . '</td> <td>' . $row['telefon'] . '</td> <td>' . $row['id'] . '</td> </tr>'
 ?>
</table>
<button class="button" id="myBtn">Adauga Contact</button>
<a class="button" id="myBtn" href="sterge.php">Sterge Un Contact</a>
<div id="myModal" class="modal">
 <div class="modal-content">
    <div class="modal-header">
      <span class="close">x</span>
      Adauga Contact<br /><br />
    </div>
    <br />
<div class="modal-body">
<form name="register_form" action="action.php" method="post">
    <table width="100%" border="0" cellpadding="0" cellspacing="2">
        <tr>
          
            <td><input id="ininput" placeholder="Scrie numele" type="text" name="register_name" id="register_name" required></td>
        </tr>
        <tr>
      
            <td><input id="ininput" placeholder="Scrie numarul de telefon" type="text" name="register_number" id="register_number" required></td>
        </tr>
    </table>
    <br />
    </div><br /><br />
    <div class="modal-footer">
         <tr>
            <td> </td>
            <td><input class="button" id="myBtn" type="submit" id="submit_adauga" name="register_btn"  href="index.php" value="Adauga Numar" /></td>
        </tr>
        </form>
    </div>
    
 
    


<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
var modal = document.getElementById('myModal');


var btn = document.getElementById("myBtn");


var span = document.getElementsByClassName("close")[0];


btn.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
</body>
</html>

sterge.php

<html>
    <head>
        <link href="sterge_style.css" rel="stylesheet" type="text/css" />
        <title>
            Sterge Contact</title>
            
<body>
    <div class="all">
    <div class="head">
    <br />
    <Br />
    <h1 style="text-align: center;">Stergere Contact</h1><br /><br />
    </div>
    <div class="body"><br /><br/>
    
    <form action="sterge_action.php" method="post">
<input id="ininput" placeholder="Scrie ID-ul contactului" type="text" name="idcont" id="idcont" required><br /> <br />
    </div>
<div  class="footer">
    <br />
    <input align="center" class="button" id="myBtn"" type="submit" id="submit_sterge" name="delet_btn" value="Sterge Contact"><br /><br />
       </form>
        </div>
    </all> <br /><br /><br /><br />
    <div class=".show">

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cauta contact" title="Scrie un nume!"><br /><br /><br />

<table id="myTable">
<tr class="header">
    <th style="width:60%;">Nume</th>
    <th style="width:40%;">Telefon</th>
    <th style="width:20%;">ID</th>
  </tr>
 
    
 <?php
 require_once('conect.php');
$comanda = "SELECT * FROM agenda";


$rezultat = mysql_query($comanda);


while($row = mysql_fetch_array($rezultat))
echo  '<tr> <td>' . $row['nume'] . '</td> <td>' . $row['telefon'] . '</td> <td>' . $row['id'] . '</td> </tr>'
 ?>
</table>
        </div>
        <script>
        function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
        </script>
</body>
</html>

sterge_action.php

<html><head>
</head>
<body>
<?php
session_start();
require_once('conect.php');
 
if ($_POST['idcont'] != "" ) {
 
    
    $number = $_POST['idcont'];
 
    $query = "DELETE FROM `agenda` WHERE `agenda`.`id` = ".$number."";
    $result = mysql_query($query) or die (" <!DOCTYPE html>
<html>
<head>
<style>
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
 
  border-top: 16px solid black;
 border-bottom: 16px solid black;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
body{
    background: url('0.jpg');
}
</style>
</head>
<body onload='myFunction()' style='margin:0;'>

<div id='loader'></div>

<div style='display:none;' id='myDiv' class='animate-bottom'>
  <h2>A intervenit o eroare</h2>
  <h1> Error: ". mysql_error() ."
  <p>Apasa <a href='index.php'>aici</a> pentru a vizualiza agenda.</p>
  <title>Eroare!</title>
</div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById('loader').style.display = 'none';
  document.getElementById('myDiv').style.display = 'block';
}
</script>

</body>

</html> " );
 
    if ($result) {
echo "<!DOCTYPE html>
<html>
<head>
<style>
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
 
  border-top: 16px solid black;
 border-bottom: 16px solid black;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
body{
    background: url('0.jpg');
}
</style>
</head>
<body onload='myFunction()' style='margin:0;'>

<div id='loader'></div>

<div style='display:none;' id='myDiv' class='animate-bottom'>
  <h2>Numarul a fost sters cu succes!</h2>
  <p>Apasa <a href='index.php'>aici</a> pentru a vizualiza agenda.</p>
  <title>Numar Sters!</title>
</div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById('loader').style.display = 'none';
  document.getElementById('myDiv').style.display = 'block';
}
</script>

</body>

</html>";
    }
}
?>
</body>
</html>

sterge_style.css

body{
    background: url('0.jpg');
}
#ininput
{
     width: 240px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#ininput:focus
{
    width: 100%;
}
.all{
   
    align: center;
}
.head{
    border: none;
    background: #5cb85c;
    bordeR-radius: 10px;
    color: white;
}
.body{

    background: none;
}
.footer{
    border: none;
    background: #5cb85c;
    bordeR-radius: 10px;
}
#myInput{
    width: 230px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#myInput:focus {
    width: 100%;
}
#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  background: white;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

style.css

* {
  box-sizing: border-box;
}

#submit_button
{
     background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}
#submit_button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#myInput{
    width: 230px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#ininput
{
     width: 240px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#ininput:focus
{
    width: 100%;
}


#myInput:focus {
    width: 100%;
}
#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  background: white;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
.button {
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.amodal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.amodal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.aclose {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.aclose:hover,
.aclose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.amodal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.amodal-body {padding: 2px 16px;}

.amodal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
body{
    background: url('0.jpg');
}

database:

1. intri in localhost/phpmyadmin
2. intri in consola si executi pe rand urmatoarele comenzi:
comanda 1:

CREATE DATABASE IF NOT EXISTS `carte_telefon` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

comanda 2:

CREATE TABLE `agenda` (
  `id` int(11) NOT NULL auto_increment,
  `nume` char(60) NOT NULL default '',
  `telefon` char(60) NOT NULL default '',
  PRIMARY KEY  (`id`));

Carte De Telefon.zip

Edited August 31, 2016 by D4N1

BadDriver aka Roberts ENBs · August 30, 2016

Nu conteaza ca e simplu si inutil, asa inveti, bravo. Nu poti face chestii complicate si utile din prima, programarea se ia pas cu pas.

Rami · August 31, 2016

Wow, felicitari pentru munca depusa.

D4N1EL · August 31, 2016

Wow, felicitari pentru munca depusa.

In mod normal... ma abtin sa comentez la comentariile de acest gen. Da' este enervant ca sa vezi pe cineva ca iti posteaza in topic doar ca sa faca posturi pe forum.

Zeus09 · September 6, 2016

Felicitari pentru munca depusa.Continua tot asa.

Mentosan · September 7, 2016

Consider că se poate da T/C.

Sign In

[HTML & PHP & CSS & MYSQL] Agenda Telefonica

Recommended Posts

D4N1EL

Link to comment

Share on other sites

BadDriver aka Roberts ENBs

Link to comment

Share on other sites

Rami

Link to comment

Share on other sites

D4N1EL

Link to comment

Share on other sites

Zeus09

Link to comment

Share on other sites

Mentosan

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

SA-MP

RAGE-MP

Important Information