Category: Mysql

PHP + MySQL + jQuery = fuel-prices.eu

I developed fuel-prices.eu as a side project using data from the Weekly Oil Bulletin provided every week(or almost) by the European Commission. PHP and MySQL helped me with the back site work and chart.js helped me a lot with the chart and data representation of the Diesel and Euro-Super 95 data flows.

The data range is from 2015 inclusive to our present week.

I also have in plan to add to the database all of the data beginning from 2009, that means a lot of PHPmyAdmin work for me in the next future.

For more informations about this project you can contact me.

Send data to PHP via AJAX and get response

This is the simple script that I use every time I build one page sites… I use this code to update, delete, modify, add data to Mysql or other DB’s…

This code also get the class or id of the clicked link and can display a result there or in another div… this script can also be modified to play other important parts in the web app…

Hope it helps.

$('.get-delete').click(function() {
    var get_id = $(this).attr('id');
    $("#" + get_id ).toggle(400);
    $.ajax({
        type: 'POST',
        url: 'delete.php',
        data: { idx: get_id},
        success: function(response) {
            $('#result').html(response);
        }
    });
});

jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

$(document).ready(function(){

var request;

$("#contact-form").submit(function(event){

    event.preventDefault();

    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "contact-form.php",
        type: "post",
        data: serializedData
    });
    request.done(function (response, textStatus, jqXHR){
        //console.log("Hooray, it worked!");
        $(".show-success").slideToggle();
        //$(".hide-contact").slideToggle();
    });

    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
        $(".show-error").slideToggle();

    });


    request.always(function () {
        $inputs.prop("disabled", false);
    });

});

});
<style>
.frm{padding:9px;border-radius: 3px;background:#ECEFF1;font-size: .8em; border:0px; width: 100%;font-weight: 300;box-sizing: border-box;}
.frb{background:#3498DB}
.pt-12{padding-top:12px}.small{font-size: .8em}
.hide{display:none}
.org-bg{background:#E74C3C;padding: 12px;border-radius: 3px;margin-bottom: 12px;color: #fff}.grn-bg{background:#52BE80;padding: 12px;border-radius: 3px;margin-bottom: 12px;}
.orange-bg{font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
.fc{padding-bottom:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.2em}

#loading{display:none}

.spinner {
  margin: 0px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.trimit{background: rgba(149, 192, 234);padding: 12px; border-radius: 3px;margin-top:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
</style>
<!-- form ROW -->
<div class="row pt-12x">

<div id="loading">
	
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

<div class="trimit"><i class="far fa-paper-plane fa-fw"></i> Se trimit datele...</div>

</div>

<!-- Error Handlers --><div id="show-success"></div>
<div class="grn-bg orange-bg list-font-1 hide show-success"><i class="fas fa-check-square fa-fw"></i> <b>Vă mulțumim!</b> Am primit mesajul dumneavoastră.</div>
<div class="org-bg orange-bg list-font-1 hide show-error"><i class="far fa-question-circle fa-fw"></i> <b>Eroare!</b> Mesajul nu a fost trimis.</div>
<!-- .Error Handlers -->
<!-- form --> <form id="contact-form">                        
  <div class="hide-contact">
<div class="fc"><i class="fas fa-user fa-fw brown"></i> Formular contact</div>

            <div>
              <input type="text" name="name" class="frm" placeholder="Nume" required="">
            </div>
            <div class="pt-12">
              <input type="text" name="email" class="frm" placeholder="Email@exemplu.com" required="">
            </div>

            <div class="pt-12">
              <input type="text" name="phone" class="frm" placeholder="Număr telefon" required="">
            </div>

            <div class="pt-12">
              <textarea name="message" class="frm" rows="6" placeholder="Mesaj..."></textarea><input type="text" name="city" value="" class="hide">

            </div>

<div class="pt-12 small"><i class="fas fa-lock fa-fw green"></i> Protecția datelor <small>(GDPR) (EU) 2016/679 <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation"><i class="fas fa-external-link-alt fa-fw"></i></a></small></div>

            <div class="pt-12">
              <button type="submit" class="frm frb dsblb"><i class="fas fa-paper-plane fa-fw"></i> Trimite</button>
            </div></form>
</form>

</div> <!-- ./hide-contact -->
          


</div>
<!-- ./form-ROW -->

<?php

// v1.0 090318

if(isset($_POST['city']) && !empty($_POST['city'])) {

echo "Hello Robot!";

exit;

}

if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {

echo "Hello Robot 2!";

exit;

}

$today = date("d/m/Y - G:i ");

/////////////////////
///////////
/////////
///////
/////
//



include_once("_connect.php");

// _POST Vars...

$name     		= htmlentities($_POST['name']);
$email    		= htmlentities($_POST['email']);
$phone    		= htmlentities($_POST['phone']);

$message1  		= htmlentities($_POST['message']);

$data 			= time(); 

$sql = "INSERT INTO table_name
(name, email, phone, message, data)
VALUES 
('$name', '$email', '$phone', '$message1', '$data')";





if ($conn->query($sql) === TRUE) {

//////

	//////



	///

// yeyy! Mail to owner...





$to_owner = "me@example.com";
$subject_owner = "New message from...";

$message_owner = "
<html>
<head>
<title>New message</title>
</head>
<body>
<p><h3>Mesaj nou pe site...</h3></p>
<p>Detalii mesaj:</p>
<ul>
<li>Name: $name</li>
<li>Phone: <a href=\"tel:$phone\">$phone</a></li>
<li>Email: $email</li>
<li>Data: $today</li>
<li>Message: $message1</li>
</ul>
</body>
</html>
";

// Always set content-type when sending HTML email
$headers_owner = "MIME-Version: 1.0" . "\r\n";
$headers_owner .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers_owner .= 'From: Name<contact@example>' . "\r\n" . "Reply-to: $email" . "\r\n";
$headers_owner .= 'Cc: carbon-copy@example.com' . "\r\n";

mail($to_owner, $subject_owner, $message_owner, $headers_owner);







/////////////////
/// +++++++++++++++++++++ /////









exit;

} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();

?>

Mysql: Table structure for table `contact`

This is the basic table structure for my contact section on many projects I work on…
The id field is auto_increment and the time field is just a PHP time() string.

CREATE TABLE `contact` (
  `id` int(11) NOT NULL,
  `Name` varchar(30) NOT NULL,
  `Email` varchar(90) DEFAULT NULL,
  `Message` varchar(5000) DEFAULT NULL,
  `time` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `contact`
  ADD KEY `id` (`id`);

ALTER TABLE `contact`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;