News & Blog

CRUD – PDO – 3. rész

News & Blog

Ha még nem olvastad, olvasd el előbb ezt a bejegyzést: CRUD – PDO – 2. rész

Formázzunk – a stílusosztályok megtervezése

Ideje arculatot adni a programunkat, A célunk, hogy valahogy így nézzen ki az oldal:

Először keressünk egy megfelelő betűtípust a weboldal számára. (www.google.com/fonts) A Raleway-t választjuk, így szúrjuk a következő sort a <head> szakaszba:

  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">

Az oldalt külső css fájllal (style.css) formázzuk meg, ezt szintén a <head> szakaszban csatoljuk az oldalhoz:

<link href="style.css" rel="stylesheet">

Amennyiben megnézzük a képernyőtervet, azt látjuk, hogy vízszintesen 2 részre van osztva (a fejléc és a törzs), míg a törzsnek is két része van, a bal (beszúrás, törlés és szerkesztés űrlapok) és a jobb (keresés űrlap és listázott adatok) oldali panel. A jobb oldali panelban a kilistázott adatokat is külön szakaszba rakjuk. A három szakaszt a right-pane, left-pane és data-wrapper stílusosztályokkal formázzuk meg. (A data-wrapper szakaszban a táblázat adatsorait is külön szakaszba (data-rows) helyezzük. Az index.php állomány így a következőképpen alakul:

<body>
  <h1>PDO</h1>
  <div class="container">
    <div class="left-pane">
        <!-- Insert, Delete és Edit űrlapok -->
    </div>
    <div class="right-pane">
      <!-- Search űrlap -->
      <div class="data-wrapper">
          <!-- Fejlécek -->
          <div class="data-rows">
              <!-- Listázott adatok -->
          </div>
      </div>
    </div>
  </div>
</body>

Most tervezzük meg a beviteli mezők stílusosztályainak a nevét. A bal oldali szövegbeviteli mezőket a gt-input, a gombokat a gt-button osztállyal formázzuk meg, míg a bal oldalon még megkapják annak megfelelően, hogy melyik oldalukat kell kerekíteni a rounded-left és a rounded-right osztályokat. A lenyíló lista formázása kicsit bonyolultabb lesz, később tárgyaljuk.

Nézzük először a beszúrás űrlapot:

      <h3>Insert</h3>
      <form action="insert.php" method="POST">
        <input type="text" placeholder="Name" name="name" class="gt-input rounded-left">
        <input type="text" placeholder="Email" name="email" class="gt-input">
        <input type="submit" value="Insert" name="insertData" class="gt-button rounded-right">
      </form>

A törlés űrlapban a lenyíló lista köré egy <div> szakaszt illesztünk, és azt is formázzuk, hogy a lekerekítést a listán is megvalósítsuk.

      <h3>Delete</h3>
      <form action="deletedata.php" method="POST">
        <div class="selectWrapper-left-rounded">
          <select name="id" id="deleteList" class="gt-input dataList">
            <?php foreach($data as $item) { ?>
              <option value="<?php echo $item['id'] ?>"><?php echo $item['id'] . ' - ' . $item['name'] ?></option>
            <?php } ?>
          </select>
        </div>
        <input type="submit" value="Delete" name="deleteData" class="gt-button rounded-right">
      </form>

Ugyanígy teszünk az Edit és a Search űrlappal is:

      <h3>Edit</h3>
      <form action="editdata.php" method="POST">
        <input type="text" placeholder="Id" name="id" class="gt-input rounded-left">
        <input type="text" placeholder="Name" name="name" class="gt-input">
        <input type="submit" value="Edit" name="editData" class="gt-button">
      </form>
      <h3>Search</h3>
      <form method="GET">
        <input type="text" placeholder="Name" name="name" class="gt-input rounded-left rounded-right" onkeyup="searchNames(this.value)">
      </form>

Az adattábla formázása annyiban különleges, hogy a törzsre külön osztályt húzunk rá, hogy csak a törzs legyen görgethető:

    <h3>Data</h3>
    <table>
      <thead>
        <tr><th>Id</th><th>Name</th><th>Email</th></tr>
      </thead>
      <tbody class="data-rows"></tbody>
    </table>
</div>

Formázzunk – a stílusosztályok megvalósítása

A style.css fájlban dolgozunk. Első lépésben határozzuk meg az összes elemre vonatkozó formázási szabályokat. A box szintű elemek méretébe belevesszük a keretetet és a helykitöltés (padding) méretét is, és mindenhol nullázzuk a margót és a padding-ot.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Ezután az oldal törzsére vonatkozó beállítások jönnek. Kijelöljük a használandó betűtípust és a szövegszínt. (Persze itt-ott ezt felülbíráljuk majd.)

body {
  font-family: "Raleway";
  color: #f5f6fa;
}

Formázzuk meg most a h1 és h3 címsorokat:

h1{
  padding: 24px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
}

h3{
  padding: 24px 16px;
  font-size: 20px;
  font-weight: normal;
}

A .container osztállyal formázzuk meg az űrlapok és adatok szakaszát. A flex modellt használva lebegtetés és pozicionálás nélkül tudunk majd rugalmas weblapot létrehozni. A belső árnyékolással sokkal lágyabb átmenetet érhetünk el, mintha keretet állítottunk volna be. (A belső árnyékolást azért háromféleképpen konfiguráltuk, mert így mindegyik böngésző platformon működik majd.)

.container{
  padding: 48px 16px;
  display: flex;
  background: #2f3640;
  box-shadow: inset 0 7px 23px -6px rgba(0,0,0,.75), inset 0 -7px 23px -6px rgba(0,0,0,.75);
  -webkit-box-shadow: inset 0 7px 23px -6px rgba(0,0,0,.75), inset 0 -7px 23px -6px rgba(0,0,0,.75);
  -moz-box-shadow: inset 0 7px 23px -6px rgba(0,0,0,.75), inset 0 -7px 23px -6px rgba(0,0,0,.75);
}

A következő lépés a bal és a jobb oldali panel formázása. Mivel flex modellt használunk, nagyon egyszerű a dolgunk. A felx konténerünkben (.container) két flex-item-et hozunk létre úgy, hogy a bal oldali (.left-pane) kétszer olyan széles, mint a jobb oldali (.right-pane).

.left-pane {
  flex: 2;
  border-right: 2px solid #475261;
  max-width: 800px;
}

.right-pane {
  flex: 1;
}

Formázzuk meg a beviteli mezőket. Megadjuk a magasságukat, a helykitöltést körülöttük, letiltjuk a keretüket, majd azt, hogy melyik sarkuk legyen lekerekítve.

.gt-input{
  height: 48px;
  padding: 0 16px;
  border: 0;
}

.rounded-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.rounded-right {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

A következő lépés a gombok formázása. Kicsit több paraméterüket állítjuk be, de a CSS kódban jól követhető, hogy mit.

.gt-button {
  height: 48px;
  width: 160px;
  border: none;
  background: #e84118;
  font-family: "Raleway";
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #f5f6fa;
}

Kezd már kialakulni a bal panel végső formája, de pár lépésre még szükségünk van. Az űrlapokra is ráhúzunk egy flex modellt (új flex konténert indítva velük), az egyes beviteli elemek lesznek így a flex-item-ek. Az űrlapon (konténeren) belül az egyes elemeket egyenletesen helyezzük el, az elsőt a bal oldalra, az utolsó jobb oldalra igazítva (ezt állítottuk be a justify-content tulajdonsággal.). Az űrlapon belül azokon az elemeken kikapcsoljuk a keretezést, amelyekre a fókusz kerül. Végül pedig a szöveges beviteli mezőkre és a lehulló listákra azonos szélességet állítunk be. (Vegyük észre, a submit gombra nem állítottuk be a flex: 1 értéket, így annak a width tulajdonsága határozza meg a szélességét.) Végül még beállítjuk a beviteli mezők és a listák betűtípusát és betűméretét.

form {
  display: flex;
  justify-content: space-between;
  padding: 0 32px;
}

form input: focus,
form select: focus {
  outline: none;
}

form input[type="text"],
form select {
  flex: 1;
}

form input,
form select {
  font-family: "Raleway";
  font-size: 16px;
  background-color:white;
}

Sajnos azt tapasztaljuk, hogy a lehulló listákon a sarkok lekerekítése nem a kívánalmaink szerint alakul. (A lista elemmel különben is sokszor baj van, nehezen engedelmeskedik a CSS formázásnak.) Egy trükkhöz folyamodunk. A HTML kódban egy külön szakasszal vesszük körbe a <select> elemet, amelyhez a selectWrapper-left-rounded osztályt rendeljük, és ebben a szakaszban valósítjuk meg a lekerekítést. (Sajnos ilyen egyszerűen nem érjük el, hogy a listára kattintva is jól nézzenek ki a listaelemek.)

.selectWrapper-left-rounded{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background-color:white;
  overflow: hidden;
  flex: 1;
}

form select {
  width: 100%;
}

Térjünk át a jobb oldali panelra. Az adatokat megjelenítő táblázattal kezdjük. A stílusok megértése nem nehéz, annyi az érdekesség, hogy a táblázat minden sora egy flex konténer lesz, így az egyes cellák könnyen formázhatók. Az nth-child() pszeudo osztállyal az egyes oszlopokat jelöljük ki. (Mindegyik oszlopot fix szélességűre állítjuk, így a gördítősáv nem tolja el az adatsorokat.)

table {
  padding: 0 32px;
  width: 100%;
}

table tr {
  display: flex;
  border-bottom: 1px solid #475261;
}

table tr th,
table tr td {
  text-align: left;
  padding: 8px;
}

table tr th:nth-child(1),
table tr td:nth-child(1) {
  width: 80px;
}

table tr th:nth-child(2),
table tr tr:nth-child(2) {
  flex: 1;
  text-align: left;
}

Utolsó lépésként megformázzuk a megjelenített adatokat. A táblázat sorait külön osztállyal (data-rows) formázzuk meg, így a gördítősáv csak az adatsorok mellett jelenik meg, a fejléc rögzítve marad. Ahhoz viszont, hogy a gördítősáv megjelenjen, block típusúra kell állítani a display tulajdonságot.

 .data-wrapper {
  height: 280px;
  margin-top: 32px;
}
.data-rows {
  display: block;
  height: 145px;
  overflow-y: auto;
}

Ennyi volt. Remélem a cikksorozat elegendő segítséget nyújtott, hogy hasonló feladatokat meg tudjunk valósítani más környezetekben is.

A végső kód az alábbi linken keresztül érhető el: LINK

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük