Update query med hjælp af Ajax?

Besvar #0Spørgsmål oprettet af @HrCalmar| Premium

Premium | 8225 points

30 points ude 2 indlæg 7 år siden Spørgsmålet er ikke løst

Hey.
Så har jeg brug for lidt hjælp igen igen.. ;) (Y)

Jeg prøver at lette vores arbejde på Københavns MiddelalderMarked, hvor vi skal have flere personer indover der skal udlevere diverse ting til vores frivillige.
Lige nu lægger det på Google Drev, men den løsning har aldrig fungeret for os.

Jeg blev derfor spurgt om jeg kunne lave noget online, og det er nu det jeg prøver :)

Jeg koder på siden her

Mit problem er at jeg ikke helt ved hvordan jeg skal opdatere de enkle størrelser korrekt.

Ideen er (som du sikkert allerede har regnet ud) at man skal kunne trykke på + & -

Min kode i Index.php ser sådan ud:

<?php
	include("app.php");
	$app = new minAwesomeApp;
	ini_set('display_errors', 1);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <title>T-Shirt Tæller</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/round-about.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php">Københavns MiddelalderMarked</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.php">Tæller</a>
                    </li>
                    <li>
                        <a href="contact.php">Kontakt</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Introduction Row -->
        <div class="row">
            <div class="col-lg-12">
            <br />
                <h1 class="page-header">Brug mig korrekt
                    <small>Læs derfor dette inden brug!</small>
                </h1>
                <p>Hver gang du udlevere en t-shirt. Skal du klikke på det grønne plus i den rigtige størrelse.</p>
            </div>
        </div>
				<!-- Team Members Row -->
				<div class="row">
						<div class="col-lg-12">
								<h2 class="page-header">Størrelser</h2>
						</div>


				<?php
					foreach ($app->DatabasePrepareQuery("SELECT * FROM tshirt", array()) as $data){

						echo '<div class="col-lg-2 col-sm-6 text-center">
                <div class="badge"><h1> ' . $data['udleveret'] . '</h1></div>
                <h3>' . $data['str'] . '</h3>
                <small>Tilbage : ' . $data['retur'] . '</small>
                <p><button id="plus"><img src="images/plus.png" alt="plus" width="" height="" value=""  /></button>  <button><img src="images/minus.png" alt="minus" width="" height="" /></button></p>
            </div>';

					}
				?>
        </div>
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Simon Calmar Petersen 2015-<?php echo "20". (date(y)); ?></p>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </footer>
    </div>
    <!-- /.container -->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

Min app.php ser sådan her ud.

<?php

// Sætter vores timezone
date_default_timezone_set('Europe/Copenhagen');

// Opsætter vores "locale" til dansk
setlocale(LC_ALL, 'da_DK.UTF-8');

// Opsætter fejlrappotering til alt pånær "notice"-beskeder
error_reporting(E_ALL ^ E_NOTICE);

// Definerer at vi gerne vil vise fejlbeskeder, sæt til 0 for at skjule fejlbeskeder
ini_set("display_errors", 1);

class minAwesomeApp {

    // Database information
    private static $db;
    private $MySQLUsername = '*********';
    private $MySQLPassword = '*********';
    private $MySQLHostname = '*********';
    private $MySQLDatabase = '*********';

      // Forbind til vores database
      public function __construct() {
          if (!isset(self::$db)) {
              try {
                  self::$db = new PDO('mysql:host=' . $this->MySQLHostname .
                  ';dbname=' . $this->MySQLDatabase .
                  ';charset=utf8;', $this->MySQLUsername,
                  $this->MySQLPassword);
                  self::$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
              } catch (PDOException $e) {
                  die ( "Kunne ikke logge på databasen, måske har du indtastet forkert MySQL username, password, hostname eller databasenavn. Fejlbeskeden fra systemet er: " . $e->getMessage() );
              }

          }
      }

      // Hent data ud fra vores database (flere linjer)
      // DatabasePrepareQuery( "SELECT * FROM Adressebog", array() )
      // DatabasePrepareQuery( "SELECT * FROM Adressebog WHERE navn = ?", array('Daniel') )
      // DatabasePrepareQuery( "SELECT * FROM Adressebog WHERE navn LIKE ?", array('%Daniel%') )
      public function DatabasePrepareQuery($query,$data_array) {
        try {
          $stmt = self::$db->prepare($query);
          $stmt->execute($data_array);
          return $stmt;
        } catch (PDOException $e) {
            // Catch fejlbesked og echo den ud
            echo 'Der opstod en fejl - fejlbesked: ' . $e->getMessage();
            exit;
        }
      }

      // Hent data ud fra vores database (éen linjer)
      // DatabasePrepareQueryReturnFirstField( "SELECT * FROM Adressebog WHERE id = ?", array(1) )
      public function DatabasePrepareQueryReturnFirstField($query, $data_array) {
        try {
          $stmt = self::$db->prepare($query);
          $stmt->execute($data_array);
          return $stmt->fetch();
        } catch (PDOException $e) {
            // Catch fejlbesked og echo den ud
            echo 'Der opstod en fejl - fejlbesked: ' . $e->getMessage();
            exit;
        }
      }

      // Slet noget fra vores database
      // DatabaseDelete( "Adressebog", "WHERE id = ?", array(1) )
      public function DatabaseDelete($TableName, $WhereField, $WhereValues) {
            if (is_array($WhereValues) && isset($WhereField) && isset($TableName)) {
              try {
                $prepareInsert = self::$db->prepare('DELETE FROM ' . $TableName . ' ' . $WhereField);
                $prepareInsert->execute($WhereValues);
                return $prepareInsert->rowCount();
              } catch (PDOException $e) {
                  // Catch fejlbesked og echo den ud
                  echo 'Der opstod en fejl - fejlbesked: ' . $e->getMessage();
                  exit;
              }
            } else {
                return 0;
            }
        }

        // Sæt noget ind i vores database
        // DatabaseInsert( "Adressebog", array('Navn','Email'), array('Daniel','[email protected]') )
        public function DatabaseInsert($TableName, $Fields, $Values) {
            $buildFields = '';
            if (is_array($Fields)) {
                // Loop igennem alle vores felter
                foreach($Fields as $key => $field) :
                    if ($key == 0) {
                        // Første felt
                        $buildFields .= $field;
                    } else {
                        // Efterfølgende felter starter med ","
                        $buildFields .= ', ' . $field;
                    }
                endforeach;
            } else {
                // Vi indsætter kun éet felt, ingen behov for overstgående loop
                $buildFields .= $Fields;
            }
            $buildValues = '';
            if (is_array($Values)) {
                //  Loop igennem alle vores values
                foreach($Values as $key => $value) :
                    if ($key == 0) {
                        // Første
                        $buildValues .= '?';
                    } else {
                        // Efterfølgende starter med ","
                        $buildValues .= ', ?';
                    }
                endforeach;
            } else {
                // Vi indsætter kun éet felt, ingen behov for overstgående loop
                $buildValues .= ':value';
            }
            try {
                $prepareInsert = self::$db->prepare('INSERT INTO '.$TableName.' ('.$buildFields.') VALUES ('.$buildValues.')');
                if (is_array($Values)) {
                    $prepareInsert->execute($Values);
                } else {
                    $prepareInsert->execute(array(':value' => $Values));
                }
                // Return last Insert ID
                return self::$db->lastInsertId();

            } catch (PDOException $e) {
                // Catch fejlbesked og echo den ud
                echo 'Der opstod en fejl - fejlbesked: ' . $e->getMessage();
                exit;
            }

        }

        // Opdater noget i vores database
        // DatabaseUpdate( "Adressebog", array('email'), array('[email protected]', 1), "WHERE id = ?" )
        public function DatabaseUpdate($TableName, $Fields, $Values, $WhereFields) {
            $buildFields = '';
            if (is_array($Fields)) {
                foreach($Fields as $key => $field) :
                    if ($key == 0) {
                        $buildFields .= $field . " = ?";
                    } else {
                        $buildFields .= ', ' . $field . " = ?";
                    }
                endforeach;

            } else {
                $buildFields .= $Fields . " = :value";
            }
            try {
                $prepareInsert = self::$db->prepare('UPDATE '.$TableName.' SET '.$buildFields.' '.$WhereFields);
                if (is_array($Values)) {
                    $prepareInsert->execute($Values);
                } else {
                    $prepareInsert->execute(array(':value' => $Values));
                }
                return self::$db->lastInsertId();
            } catch (PDOException $e) {
              echo 'Der opstod en fejl - fejlbesked: ' . $e->getMessage();
              exit;
            }

        }


}

Jeg prøvede at kigge de næste videoer igennem, men synes ikke rigtigt jeg kunne finde ud af at konvertere det over til min problem stilling :)

Mvh
S. Calmar
www.scalmar.dk

Besvar#2 @db Admin svarede for 7 år siden

Hej Simon,

Det kan godt lade sig gøre, du skal bruge jQuery og herfra kan du lave et kald uden siden skal refreshes. Dette er lidt en hurtig løsning, det kan lave meget pænere, men for lige at give dig lidt indsigt i teknologien, holder vi det lige på et begynder niveau. Bemærk også at dette emne vil vi komme meget mere ind på i vores kommende Brugersystem med PHP video.

Let's rock:

På din + knap laver du følgende href:

<a href="#" onclick="updateCount('inc','xxl')">+</a>

Og på din - knap laver du følgende href:

<a href="#" onclick="updateCount('dec','xxl')">-</a>

To to knapper (increment og decrement) refererer nu til en javascript-funktion og sender to parametre med, først (typen) altså om der er tale om en inc eller dec, og herefter t-shirt størrelsen (ex. xxl). Lad os nu bygge den respektive Javascript-funktion:

<script>

function updateCount(type, size) {
	
	$.get( "ajax/update.php?type=" + type + " &size=" + size, function( data ) {
	  $( "#antalTilbage_" + size ).html( data );
	});

}

</script>

Ovenstående JS kalder nu ajax/update.php filen med to $_GET-variabler, type og size. Inde i vores PHP kan vi nu behandle kaldet, eksempel:

<?php

// Godkendte typer:
$types = array('inc', 'dec')

// Godkendte størrelser:
$sizes = array('xxs','xs','m','l','xl','xxl');

if(  isset($_GET['type']) && isset($_GET['size']) && in_array(strtolower($_GET['type']), $types) && in_array(strtolower($_GET['size']), $sizes)  ) {
	
	if($_GET['type'] == "inc") {
		
		// Hent vores aktuelle antal t-shirts:
		$tshirt = $app->DatabasePrepareQueryReturnFirstField("SELECT * FROM tshirt WHERE str = ?", array($_GET['type']));
		$tshirtAntal = intval($tshirt['udleveret']);
		$tshirtNewAntal = intval($tshirtAntal-1);
		
		// Opdater:
		$app->DatabaseUpdate("tshirt", array('udleveret'), array($tshirtNewAntal, $_GET['size']), "WHERE str = ?") 
		
		// Returner nyt antal til vores Javascript:
		echo $tshirtNewAntal;
		
	}
	
}

Nu returnerer vores PHP-kode det nye antal tilbage, det skal vi have reflekteret på vores hjemmeside, bemærk at vi tidl. i vores Javascript-kode skrev følgende:

$( "#antalTilbage_" + size ).html( data );

Det betyder kort fortalt at vi i et HTML-elemenet med id-navnet antalTilbage_xxl vil indsætte resultatet fra vores PHP, altså $tshirtNewAntal. Så lad os rundt om vores html-tag indsætte et ID af samme navn:

<div class="badge"><h1 id="antalTilbage_xxl"> ' . $data['udleveret'] . '</h1></div>

Kan evt også laves dynamisk:

<div class="badge"><h1 id="antalTilbage_'.strtolower($data['str']).'"> ' . $data['udleveret'] . '</h1></div>

Uden at have testet ovenstående, så er burde det give et godt indblik i hvordan du kan løse din aktuelle opgave.

God fornøjelse :)

Med venlige hilsner

Daniel Bahl (@db)
CEO – v5.dk ApS

Du er ikke logget ind

Følger med i denne tråd

Forum kategorier

Aktive forum-tråde lige nu