Pogledajte zadatak B10 - Elektronski rečnik iz priručnika za Maturu, na strani 247.

(zadatak: B10 - Elektronski rečnik )

Po tome kako je zadatak napisan, vidi se da se traži da se uradi u programu Visual Studio, da koristi MS SQL bazu podataka i da se objavi na IIS web serveru

Ovaj put ćemo raditi zadatak u XAMPP - Apache web server, MySQL baza i kod ćemo pisati u VS Code:

  • kreirati bazu (recnikB10)
    • odaberite za Collation varijantu utf8_croatian_ci (naša slova, case insensitive)
  • u njoj kreirati tabelu Reci:
CREATE TABLE RECI
( ID INT PRIMARY KEY AUTO_INCREMENT,
Engleski VARCHAR(50) NOT NULL,
Srpski VARCHAR(50) NOT NULL,
Opis VARCHAR(1024)
)
  • U web root folderu web servera kreirati folder u kojem se radi (../XAMPP/htdocs/PeraDetlic/recnik) i otvoriti ga sa VS Code
  • kreirati fajlove koji nam trebaju: index.php, upis.php, uputstvo.php, stil.css
  • po potrebi kreirati i pocetak.php i kraj.php koji će se include-ovati u sve ostale fajlove
  • koristiti Bootstrap po potrebi

Kako se radi:

Prvo treba kreirati fajlove koji se koriste.

Obratite pažnju da je u sve tr stranice na vrhu isto - naslob i linija sa menijem.

<!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.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 
    <title>Elektronski rečnik</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <h1 class="bg-info ">Elektronski rečnik</h1>
    <nav class="navbar navbar-expand navbar-dark bg-primary">
        <div class="nav navbar-nav">
            <a class="navbar-brand" href="index.php">Rečnik</a>
            <a class="navbar-brand" href="dodaj.php">Dodaj novu reč</a>
            <a class="navbar-brand" href="uputstvo.php">Uputstvo</a>
        </div>
    </nav>

    <hr>
   
 
</div>
</body>
</html>

Zbog toga što je isto u sva tri fajla, prvi deo ćemo ubaciti u (sve od početka fajla pa do karaja navigacije), a drugi deo ćemo ubaciti u i primeniti include direktivu u sva tri fajla, :

<!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.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>Elektronski rečnik</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <h1 class="bg-info ">Elektronski rečnik</h1>
    <nav class="navbar navbar-expand navbar-dark bg-primary">
        <div class="nav navbar-nav">
            <a class="navbar-brand" href="index.php">Rečnik</a>
            <a class="navbar-brand" href="dodaj.php">Dodaj novu reč</a>
            <a class="navbar-brand" href="uputstvo.php">Uputstvo</a>
        </div>
    </nav>
 
    <hr>
</div>
</body>
</html>
<?php
    include "pocetak.php";
?>
<!-- između ovih delova ubacijemo html elemente i php kod -->
 
<?php
    include "kraj.php";
?>
 

... Ovde će biti naveden samo deo u kojem se unose podaci u bazu, a vama ostavljamo da za vežbu uradite i deo u kojem se radi pretraga nad podacima koji već postoje u bazi.

U fajl upis.php, između uključivanja početka i kraja ubaciti elemente koji nam trebaju:

  • tekst i input polje tipa text za unos engleske u srpske reči
  • tekst i textarea za unos opisa
  • dugme tipa submit za slanje podataka ka serveru
  • i obavezno sve  to smestiti u formu! ...
  • a u ISTOM FAJLU može da se vrši obrada - dodavanjem php dela u kod:
    • samo ako je kliknuto na dugme (if(isset($_GET['dugme'])))... se kreira konekcija ka bazi.
    • Ako se konekcija ne uspostavi izaći iz skripte uz odgovarajuću poruku (die(...))
    • preuzeti podatke koje je korisnik uneo
    • Ako su prazne polja za reči opet izaći iz skripte uz odgovarajuću poruku (die(...))
    • kreirati upit sa tim podacima
    • izvršiti upit i spisati poruku da je unos uspešan
<form action="upis.php">
<p>
    Engleska reč:
    <input type="text" name="eng" id="eng" >
</p>
<p>
    Srpska reč:
    <input type="text" name="sr" id="sr">
</p>
<p>
    Opis:
    <textarea name="opis" id="opis" cols="25" rows="5"></textarea>
</p>
 
<button type="submit" name="dugme">Prevedi</button>

</form>
...
Last modified: Sunday, 2 November 2025, 3:52 PM