PROJECT 9 SIMPLE PHP BLOG KWA KUTUMIA PHP, HTML NA DATABASE MySQL DATABASE

Ili kuielewa vyema project hii vyema ukaanza kupitia tena mafunzo ya PHP level 3 kuanzia somo la 11 hadi 15.

Katika project utajifunz ajinsi ya kusoma taarifa kwenye database. Somo hili litajikita zaidi katika kukupatia msingi wa kuweza kutengeneza blog yako. Tutasoma data hizi katika namna kuu mbili. Namna ya kwanza ni kusoma mafaili na namna ya pili  i kusoma taarifa za maandishi.

 

Hasa katika somo hili utajifunza jinsi ya kusafirisha taarifa kwenye php kwa kutumia GET method. Ni kama tulivyoona kwenye form tumetumia POST method. GET method husaidia katika kusafirisha taarifa kwenye url.

 

Hivyo basi tengeneza filda liite web, kisha weka ndani yake folda lingine liite upload. Kisha tengneza mafaili  10 kama inavyoonekana hapo kwenye picha chini 

Somo hili ni kama vile tunakwenda kutengeneza kajiblog kadogo. Kwa kuwa tunakwenda kuweka post yenye pich. Kisha tutajifunza ku edit, baada ya hapo tutajifunza kufuta post na kwenye database na kufuta faili kwenye folda. Tutakwenda kupitia faili moja baada ya jingine.

 

  1. config.php

Hili ndilo faili letu lwa kwanza ambapo tutakwenda kuunganisha database. Code za ku connect databse zipo kwenye somo lililotangaulia. Nimeziandika tena hapo chini unaweza kuzikopi. Kumbuka kwa wale wanaotumia simu host yao ni 0.0.0.0:3306

<?php

$servername = "localhost";

$username = "root";

$password ="";

$dbname = "test";

 

// Kufanya connection

$conn=mysqli_connect($servername,  $username,$password,$dbname);

 

// kuangalia connection

if(!$conn){die("Connection failed: ".mysqli_connect_error());

}

mysqli_close($conn);

?>

 

  1. post.php

Katika faili hili sasa tunakwenda ku code ili tuweze ku post data zetu kwenye database. Sasa kw aufupi tunataka tuweke blog post ambayo itakuwa na kichwa cha habari, muhtasari, habari nzima, picha, muda ilipoandikwa na jina la mwandishi.

 

Hivyo basi unataiwa utengeneze table yenye jina blog kwenye database yako yenye column 7 ambazo ni id, title, summary, content, post_time, publisher na picture. Kumbuka id inatakiwa iwe AI yaani Auto Increment. Tumia code hizo hapo chini

CREATE TABLE `blog` (

 `id` int(11) NOT NULL,

 `title` varchar(255) NOT NULL,

 `summary` varchar(255) NOT NULL,

 `content` text NOT NULL,

 `post_time` varchar(255) NOT NULL,

 `publisher` varchar(255) NOT NULL,

 `image` varchar(255) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

ALTER TABLE `blog`

 ADD PRIMARY KEY (`id`);

ALTER TABLE `blog`

 MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

COMMIT;

 

Sasa hatuwa inayofuata ni kutengeneza html form kwa ajili ya ku post taarifa hizo za hiyo blog yetu.

 

 

<!DOCTYPE html>

<html>

<head>

   <title>Add Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="" method="post" name="Form" enctype="multipart/form-data">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"></textarea><br>

 

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="image"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

 

 

 

Ili kuweza kuboresha sehemu ya kuandika, tunakwenda ku integrate ckey editor kwenye ukurasa wetu. Hii itatusaidi ili kuweza kupata style za uwandishi. Tutatumia CDN ili kuu ganisha, hivyo basi itahitajika tuwe online ili iweze mkufanya kazi vyema.

 

1. Weka javascript code kwenye head yako, tumia link hii <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

 

2. Replace hiyo id ya text area yako na id ya ck editor. Tumia code hizi 

<!DOCTYPE html>

<html>

<head>

   <title>Add Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="post-script.php" method="post" name="Form" enctype="multipart/form-data">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"></textarea><br>

   <script>

       CKEDITOR.replace( 'content' );

   </script>

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="image"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

 

 

Mpaka kufikia hapo tumemaliza upande wa html. Sasa tuingie ku code php. Hakuna tofaiti na code zilizokwisha tangulia. Kumbuka hapa itabidi tuzuie ukubwa wa image isizidi mb 5. Tutatengeneza sasa faili lingine la php ambalo litakwenda kuprocess data zetu na kuziweka kwenye database. Faili hili tutaliita post-script.php

 

  1. post-script.php

<?php

include 'config.php';

$folda = "upload/";

//kujuwa jina la faili

$fileName = $_FILES["myFile"]["name"];

// kujuwa ukiubwa wa faili

$fileSize = $_FILES["myFile"]["size"];

//kujuwa mahala lilipo link yake

$fileLocation = $_FILES["myFile"]["tmp_name"];

//kujuwa aina ya faili

$fileType = $_FILES["myFile"]["type"];

$format = ["jpg", "jpeg", "png"];

//Kujuwa file extension

$fileextension = pathinfo($fileName, PATHINFO_EXTENSION);

 

$title = $_POST['title'];

$summary = $_POST['summary'];

$content = $_POST['content'];

$publisher = $_POST['publisher'];

$date = $_POST['date'];

$image = $fileName;

 

 

 

 

// dhibiti ukubwa wa faili

if ($_FILES["myFile"]["size"] > 5000000) {

   echo "file is too large." . "<br>";

}

if (!in_array($fileextension, $format)){echo 'file is not allowed';

} else {

   if (

   move_uploaded_file(

       $fileLocation,

       $folda .$fileName)

   ) {

 

       $sql="INSERT INTO blog(title, summary, content, post_time, publisher, image) VALUES ('$title', '$summary', '$content', '$date', '$publisher', '$image')";

 

       if (mysqli_query($conn, $sql)) {

           header("location: index.php");

       } else {

           echo "failed";

       }

   } else {

       echo "unsuccessful";

   }

}

?>

 

SASA NI MUDA WA KUANDIKA POST YETU YA KWANZA:

Mpaka kufikia hapo tumemaliza ku code ukurasa wa ku post. Hivyo basi tunakwenda kuandika post yetu mwanzo mwisho. Nitatumia screenshot katika kipengele hiki.

 

Unaweza kutumia code hizi za sql kuingiza data hizo:

 

INSERT INTO `blog` (`id`, `title`, `summary`, `content`, `post_time`, `publisher`, `image`) VALUES

(2, 'ALAMA ZA BARABARANI', 'Posti hii inakwenda kukufundisha kuhusu umuhimu wa kuzingatia alama za barabarani.', '<p><strong>Umuhimu wa alama za barabarani:</strong></p> <p><strong>A</strong>lama za barabarani zinaweza kuwa ni moja ya vitu vitakavyokusaidia kuwa salama ukiwa barabarani.</p> <p>&nbsp;</p> <p>alama za barabarani zitakifanya ujuwe ni wapi pa kupunguza mwendo ama wapi kwenye kona, wapi unaweza ku partk.</p> <p>&nbsp;</p> <p>Alama za barabarani pia zinakuelekeza wapi kuna daraja, kona, hoteli, sheli, sehemu ya mapumziko, gereji na kadhalika.</p> ', '2022-10-10', 'Bongoclass', 'alama za barabarani.jpeg'),

(3, 'taa za barabarani', 'Post hii itakujuza kuhusu taa za bnarabarani', '<p><strong>Taa za barabarani</strong></p> <p>Taa za barabarani zipo tatu ambazo ni:</p> <p>1. njekundu</p> <p>2. njano</p> <p>3. kijani</p> <p>&nbsp;</p> <p>Taa hizi kila moja ina maana na matumizi yake. Kwa mfano rangi nyekundu ina maanisha hatari. rangi hii ikiwaka basi huruhusiwi kuvuka barabara.</p> ', '2022-10-10', 'Bongoclass', 'download.jpg'),

(4, 'mafunzo ya PHP kwa kiswahili', 'haya ni mafunzo ya PHP yanayokujia kw alugha ya kiswahili', '<p>Mafunzo haya yatakwenda kukufundisha kuanzia mwanzo hadi mwisho. Tutajifunza sana kuhusu matumizi ya database kwenye PHP.</p> <p>&nbsp;</p> <p>mafunzo haya pia yatakufundisha jinsi ya kutuma emaili na ku encrypt data . karibu sana kwenye mafunzo haya.</p> ', '2022-10-10', 'Bongoclass', 'php 3 somo la-15.png'),

(5, 'post ya nne ni test post', 'Post hii n i post ya majaribio', '<p>nii ni post ambayo tutakwenda kuitumia tutakapojifunza jinsi ya kufuta taarifa kwenye database.</p> <p>&nbsp;</p> <p>Post hii ni post ya temporary yaani ni post ambayo tutaifuta kwe ye mafunzo yetu haya.</p> ', '2022-10-10', 'Bongoclass', 'IMG_20220512_080622_104.jpg');

 

 

  1. index.php

Katika ukurasa huu ndipo tunakwenda kupata orodha ya data zetu ambazo tayari zipo kwenye database. Jinsi ya kupata data hizi tulisha jifunza kwenye mafunzo ya PHP level 2. Tulijifunza jinsi ya kutumia select kwenye php.

 

Hapa kuna mabo tunatakiwa tujifunze ambayo ndio hasa kiini cha somo hili. Tulishajifunza kwenye masomo yaliotangulia jinsi ya kusafirisha taarifa kwa kutumia POST method. Tumejifunza kuhusu html form inavyosafitisha taarifa.

 

Pia tunajuwa kuwa unapotumia POST method ,kuna usalama kwa kujwa taarifa haziwezi kuon ekana kwenye browser. Sasa hapa leo tutajifunza kuhusu GET method. Hii ni nkjia inayotumika ,kusafirisha taarfifa kwa kupitia URL yaani kwa kujtumia link. 

 

Chukulia mfano kuwa unataka kwa kutumia database uweze kufunfuwa post ambayo id yake ni 100. Sasa hiyo id unawewza kuichukuwa kwenye link.katika ukurasa huu wa index tunaoutengeneza kutakuwa na orodha ya post. Sasa tutasafirisha id ya post ili iweze kutumiwa kwenye ukjurasa wa view.php. 

 

Ili kusafirisha taarifa utaweka link ya hilo faili ambalo taarifa zinakwnda kisha utafuatia alama ya kuuliza yaani ? kisha itaandika jinla la hiyo taarifa unayosafirisha. Jina hili utaweka lolote lile, itafuatia alama ya = kisha utaweka thamani ya hiyo taafifa. Mfano <a href="view.php?id=2">View</a> sasa kwa kuwa sisi hiyo thamani ya id tutahitaji tuipate kwenye post hivyo itatubidi tutu,mie code zilezile za ku fetch data kwenye database hivhyo itasomeka hivi <a href="view.php?id=<?php echo $fetch['id'];?>">View</a>  hivyo hapo link itaonekana hivi http://localhost/web/view.php?id=2 . Pia unaweza kusafirisha taarifa zaidi ya moja kwa kutumia alama ya and yaani & mfano <a href="view.php?id=<?php echo $fetch['id'];?>&publisher=<?php echo $fetch['publisher'];?>">View</a>

Itakupa link hii http://localhost/web/view.php?id=2&publisher=Bongoclass     code nzima zitaonekana hivi:=

 

<!DOCTYPE html>

<html>

<head>

   <title>Blog</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       table, th, td {

           border:1px solid black;

       }

       .dol{

           margin: 0 auto;

           max-width: 70%;

       }

   </style>

</head>

<body>

<table>

<h><a href="post.php">Add post</a></h>

   <th>#</th>

   <th>Image</th>

   <th>Title</th>

   <th>view</th>

   <th>Edit</th>

   <th>delete</th>

   <?php

   include 'config.php';

   $file = mysqli_query($conn, "select * from blog");

   $i = 1;

   while($fetch = mysqli_fetch_array($file)){?>

   <tr>

       <td><?php echo $i++; ?></td>

<td><img src="upload/<?php echo $fetch['image'];?>" width="50"></td>

       <td><?php echo $fetch['title'];?></td>

      <td><a href="view.php?id=<?php echo $fetch['id'];?>">View</a> </td>

       <td><a href="edit.php?id=<?php echo $fetch['id'];?>">Edit</a> </td>

       <td>

           <form method="post" action="delete.php">

               <input type="hidden" name="delete" value="<?php echo $fetch['id'];?>">

               <input type="submit" value="delete" name="submit">

           </form>

 

       </td>

   </tr>

   <?php }; ?>

</table>

</body>

</html>

 

Style.css

 

p{

   margin: 0 auto;

   text-align: left;

   max-width: 70%;

   font-size: 100%;

}

h1{

   font-size: 100%;

   text-align: center;

   max-width: 98%;

}

 

a {text-decoration:none;}

@media screen and (max-width: 600px) {

   img {  width: 100%;    }

}

 

 

  1. view.php

Sasa hapa ndipo tutakwenda kupokea data zilizotumwa kutokw akwenye faili la index.php kwa njia ya GET. tutatengeneza variable kama kawaida, ni kama tunavyofanya kwenye POST ila hapa sasa itakuwa ni GET. data hasa tunayoitaka ni id, maana hapa tunakwenda kusoma post ambayo id yake ni ile ambayo imetumwa. Hivyo tutatengeneza variable kama hivi $id = $_GET['id'];

Ukuras ahuu unakwend akusoma post yetu kuanzia title, summary, content, publisher na date. Kwa kuwa ni post hivyo itatakiw akuwa na kichwa cha hapari ambacho kitaonekana kwenye link. Hivyo tutatumia select kama tulivyojifunz akwenye level 2 mafunzo ya php.

 

Tuta retrive tittle ya post yetu kwa ku echo title, hivyo hivyo tutafanyaq kwenye vipengele vingine.          

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

 

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title><?php echo $fetch['title'];?></title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <meta name="description" content ="<?php echo $fetch['summary'];?>">

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

</head>

<body>

<h1><?php echo $fetch['title'];?></h1>

<p><img src="upload/<?php echo $fetch['image'];?>" width="20%"></p>

<p><?php echo $fetch['summary'];?></p>

<p><?php echo $fetch['content'];?></p>

<br><br>

<p><i><b>Imeandikwa na <b style="color: #0aff9c"><?php echo $fetch['publisher'];?></b> Terehe <b style="color: #0a58ca"><?php echo $fetch['post_time'];?></b> </b></i></p>

</body>

</html>

<?php }; ?>

 

 

Edit.php

Hapa sasa ndipo tutakwenda ku edit post yetu. Tutatumia code zile zile tulizotumia kwenye ukurasa wa post.php tofauti ya hapa ni kuwa kwenye input tutakwend akuweka attribute ingine ya value. Attribute hii ndio ambayo inabeba data ambazo tayari zipo, hivyo zitahitajika ku editiwa. Tutazipata data kutoka kwenye databse kw akutumia namna ile ile tuliofanya kwenye ukurasa wa view.php

 

Hapa pia tutatumia GET ili kupata id ya post ambayo in akwenda ku editiwa. Tutatumia id hii kwa ajilo ya kuselect data husika. Pia tutatenegneza ukurasa mwingine kwa ajili ya ku process hizi taarifs. Ukurasa huu tutauita edit-script.php.

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

<!DOCTYPE html>

<html>

<head>

   <title>Edit Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="edit-script.php" method="post" name="Form" enctype="multipart/form-data">

   <input type="hidden" name="id" value="<?php echo $fetch['id'];?>">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title" value="<?php echo $fetch['title'];?>"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary" value="<?php echo $fetch['summary'];?>"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"><?php echo $fetch['content'];?></textarea><br>

   <script>

       CKEDITOR.replace( 'content' );

   </script>

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date" value="<?php echo $fetch['post_time'];?>"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher" value="<?php echo $fetch['publisher'];?>"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="myFile"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

<?php

};

?>

 

 

Edit-script.php

Sasa ni muda wa ku process data zetu, yaani ku update database yetu kulingana na taarifa mpya tulizo nazo. Kuedit databse tutatumia UDATE. Tulishajifunza namna ya ku update taarifa kwenye database kwenye php level 2.

 

<?php

include 'config.php';

$folda = "upload/";

//kujuwa jina la faili

$fileName = $_FILES["myFile"]["name"];

// kujuwa ukiubwa wa faili

$fileSize = $_FILES["myFile"]["size"];

//kujuwa mahala lilipo link yake

$fileLocation = $_FILES["myFile"]["tmp_name"];

//kujuwa aina ya faili

$fileType = $_FILES["myFile"]["type"];

$format = ["jpg", "jpeg", "png"];

//Kujuwa file extension

$fileextension = pathinfo($fileName, PATHINFO_EXTENSION);

$id = $_POST['id'];

$title = $_POST['title'];

$summary = $_POST['summary'];

$content = $_POST['content'];

$publisher = $_POST['publisher'];

$date = $_POST['date'];

$image = $fileName;

// dhibiti ukubwa wa faili

if ($_FILES["myFile"]["size"] > 5000000) {

   echo "file is too large." . "<br>";

}

if (!in_array($fileextension, $format)){echo 'file is not allowed';

} else {

   if (

   move_uploaded_file(

       $fileLocation,$folda.$fileName)

   ) {

 

       $sql="update blog set title='$title', summary='$summary', content='$content', publisher='$publisher', post_time='$date', image='$image' WHERE id=$id";

 

       if (mysqli_query($conn, $sql)) {

           header("location: index.php");

       } else {

           echo "failed";

       }

   } else {

       echo "unsuccessful";

   }

};

?>

 

 

 

 

 

 

Delete.php

Kufuta data kwenye database ni rtahisi sana, unachotakiw akufanya ni kutumia delete from blog where id = hapa utaweka id ya post unayotaka kuifuta. Sasa id hii utaipata kupitia taarifa ulizoletewa. Kw amgfano ukurasa huu unapokea taarifa kutoka kwenye ukurasa wa index.php kwa njia ya POST hivyo utatengeneza varibale ya kuchukuwa data hiyo kwa njia ya POST.

 

Mifano ya kufuta data tulisha jifunza kwenye level 1 mafunzo ya database mysql database. Hivyo unmachotakiwa kufanya ni kutenegeza query ambayo itaweza kufan uya hivyo. Unaweza kufanya hivi DELETE FROM blog WHERE id=$id

 

<?php include"config.php";

$id = $_POST['delete'];

$sql="DELETE FROM blog WHERE id=$id";

 

if (mysqli_query($conn, $sql)) {

   header("location: index.php");

} else {

   echo "failed";

}

?>

 

Hapo juu utaona kuwa umefuta post tu lakini picha bado ipo kwenye folda. Sasa hapa nitakujuza jinsi ya kufuta post pamoja na picha yake kwenye folda. Hivyo tutakwenda tena ku edit html for iliyotuma taarifa kwa ajili ya kufutwa.

 

Ili kuweza kufuta faili kwenye server tutatumia php function inayoitwa unlink(). Function hii ina parameta moja ya lazima ambayo ni jina la hilo faili au link ya hilo faili lilipo kwenye server.kwa mfano faili letu lipo kwenye folda linaloitwa upload na jina la faili ni pich. Hivyo hata parameta hii itakuwa upload/picha.png 

 

Sasa tunachotakiw akufanya hapa ni kuongeza taarifa ingine kwenye ile form ya kusafirisha taarifa zinazokweda kufutwa. Hapa tutahitaji ibebe jina la faili, ambalo tunakwenda kulifuta. Hivyo fomu itaonekana khivi

<form method="post" action="delete.php">

   <input type="hidden" name="delete" value="<?php echo $fetch['id'];?>">

 

   <input type="hidden" name="file" value="<?php echo $fetch['image'];?>">

   <input type="submit" value="delete" name="submit">

  

</form>

 

Sasa tunakwenda tena ku edit delete.php ambapo tutakwenda kuweka code za kufuta hilo faili.hapa tutaongeza tena variable 2 ammvazo ni variable kwa ajili ya kiubeba jina la faili na variable ingine ni kwa ajili ya kubeba jina la folda. $folda = "upload/";

$fileName = $_POST['file'];

 

Sasa ni rahisi tu kufuta faili letu kwa kutumia functio y unlink() kama hivi unlink($folda.$fileName);

Changamoto hapo ni kuwa sisi tunataka kwanza ifute faili kisha ikifanikiwa ndipo iendelee kufuta faili kwenye database, ila ikifeli iwache. Hivyo tutatumia if()else. Kwa maana hiyo sasa tutatestkwamba ikiwa unlink() haipo sawa, yaani negative. Basi iseme imefeli kufuta, vinginevyo iendelee. Hivyo basi hapa function yetu tutaiweka kwenye negative !unlink()

if (!unlink($folda.$fileName)) {

   echo ("imefeli kufuta");

}

 

Code nzima hapo zitaonekana hivi

<?php include"config.php";

$id = $_POST['delete'];

$folda = "upload/";

$fileName = $_POST['file'];

 

if (!unlink($folda.$fileName)) {

   echo ("imefeli kufuta");

} else{

 

$sql="DELETE FROM blog WHERE id=$id";

 

if (mysqli_query($conn, $sql)) {

   header("location: index.php");

} else {

   echo "failed";

}

 

}

?>

 

CODE ZOTE HIZI HAPA:

  1. index.php

<!DOCTYPE html>

<html>

<head>

   <title>Blog</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       table, th, td {

           border:1px solid black;

       }

       .dol{

           margin: 0 auto;

           max-width: 70%;

       }

   </style>

</head>

<body>

<table>

 <h><a href="post.php">Add post</a></h>

   <th>#</th>

   <th>Image</th>

   <th>Title</th>

   <th>view</th>

   <th>Edit</th>

   <th>delete</th>

   <?php

   include 'config.php';

   $file = mysqli_query($conn, "select * from blog");

   $i = 1;

   while($fetch = mysqli_fetch_array($file)){?>

   <tr>

       <td><?php echo $i++; ?></td>

<td><img src="upload/<?php echo $fetch['image'];?>" width="50"></td>

       <td><?php echo $fetch['title'];?></td>

      <td><a href="view.php?id=<?php echo $fetch['id'];?>&publisher=<?php echo $fetch['publisher'];?>">View</a> </td>

       <td><a href="edit.php?id=<?php echo $fetch['id'];?>">Edit</a> </td>

       <td>

           <form method="post" action="delete.php">

               <input type="hidden" name="delete" value="<?php echo $fetch['id'];?>">

               <input type="hidden" name="file" value="<?php echo $fetch['image'];?>">

               <input type="submit" value="delete" name="submit">

              

           </form>

 

       </td>

   </tr>

   <?php }; ?>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

   <title>Blog</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style>

       table, th, td {

           border:1px solid black;

       }

       .dol{

           margin: 0 auto;

           max-width: 70%;

       }

   </style>

</head>

<body>

<table>

 <h><a href="post.php">Add post</a></h>

   <th>#</th>

   <th>Image</th>

   <th>Title</th>

   <th>view</th>

   <th>Edit</th>

   <th>delete</th>

   <?php

   include 'config.php';

   $file = mysqli_query($conn, "select * from blog");

   $i = 1;

   while($fetch = mysqli_fetch_array($file)){?>

   <tr>

       <td><?php echo $i++; ?></td>

<td><img src="upload/<?php echo $fetch['image'];?>" width="50"></td>

       <td><?php echo $fetch['title'];?></td>

      <td><a href="view.php?id=<?php echo $fetch['id'];?>&publisher=<?php echo $fetch['publisher'];?>">View</a> </td>

       <td><a href="edit.php?id=<?php echo $fetch['id'];?>">Edit</a> </td>

       <td>

           <form method="post" action="delete.php">

               <input type="hidden" name="delete" value="<?php echo $fetch['id'];?>">

               <input type="hidden" name="file" value="<?php echo $fetch['image'];?>">

               <input type="submit" value="delete" name="submit">

              

           </form>

 

       </td>

   </tr>

   <?php }; ?>

</table>

</body>

</html>

 

  1. Style.css

p{

   margin: 0 auto;

   text-align: left;

   max-width: 70%;

   font-size: 100%;

}

h1{

   font-size: 100%;

   text-align: center;

   max-width: 98%;

}

 

a {text-decoration:none;}

@media screen and (max-width: 600px) {

   img {  width: 100%;    }

}

 

  1. config.php

<?php

$servername = "localhost";

$username = "root";

$password ="";

$dbname = "blog";

 

// Kufanya connection

$conn=mysqli_connect($servername,  $username,$password,$dbname);

 

// kuangalia connection

if(!$conn){die("Connection failed: ".mysqli_connect_error());

}

?>

 

  1. post.php

<!DOCTYPE html>

<html>

<head>

   <title>Add Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="post-script.php" method="post" name="Form" enctype="multipart/form-data">

   <label for="title">Title</label>

   <input id="title" type="text" placeholder="your post title" name="title"><br>

 

   <label for="summary">summary</label>

   <input id="summary" type="text" placeholder="your post summary" name="summary"><br>

 

   <label for="content">content</label>

   <textarea id="content" type="text" placeholder="your post" name="content"  style="height: 70%; width: 100%"></textarea><br>

   <script>

       CKEDITOR.replace( 'content' );

   </script>

   <label for="date">date</label>

   <input id="date" type="date" placeholder="date" name="date"><br>

 

   <label for="publisher">Publisher</label>

   <input id="publisher" type="text" placeholder="publisher's name" name="publisher"><br>

 

   <label for="image">Image</label>

   <input id="image" type="file" placeholder="select file" name="myFile"><br>

 

   <input type="submit" value="Submit"><br>

</form>

</body>

 

  1. post-script.php

<?php

include 'config.php';

$folda = "upload/";

//kujuwa jina la faili

$fileName = $_FILES["myFile"]["name"];

// kujuwa ukiubwa wa faili

$fileSize = $_FILES["myFile"]["size"];

//kujuwa mahala lilipo link yake

$fileLocation = $_FILES["myFile"]["tmp_name"];

//kujuwa aina ya faili

$fileType = $_FILES["myFile"]["type"];

$format = ["jpg", "jpeg", "png"];

//Kujuwa file extension

$fileextension = pathinfo($fileName, PATHINFO_EXTENSION);

 

$title = $_POST['title'];

$summary = $_POST['summary'];

$content = $_POST['content'];

$publisher = $_POST['publisher'];

$date = $_POST['date'];

$image = $fileName;

 

// dhibiti ukubwa wa faili

if ($_FILES["myFile"]["size"] > 5000000) {

   echo "file is too large." . "<br>";

}

if (!in_array($fileextension, $format)){echo 'file is not allowed';

} else {

   if (

   move_uploaded_file(

       $fileLocation,

       $folda.$fileName)

   ) {

 

       $sql="INSERT INTO blog(title, summary, content, post_time, publisher, image) VALUES ('$title', '$summary', '$content', '$date', '$publisher', '$image')";

 

       if (mysqli_query($conn, $sql)) {

           header("location: index.php");

       } else {

           echo "failed";

       }

   } else {

       echo "unsuccessful";

   }

}

?>

 

  1. view.php

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

 

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title><?php echo $fetch['title'];?></title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <meta name="description" content ="<?php echo $fetch['summary'];?>">

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

</head>

<body>

<h1><?php echo $fetch['title'];?></h1>

<p><img src="upload/<?php echo $fetch['image'];?>" width="20%"></p>

<p><?php echo $fetch['summary'];?></p>

<p><?php echo $fetch['content'];?></p>

<br><br>

<p><i><b>Imeandikwa na <b style="color: #0aff9c"><?php echo $fetch['publisher'];?></b> Terehe <b style="color: #0a58ca"><?php echo $fetch['post_time'];?></b> </b></i></p>

</body>

</html>

<?php }; ?>

 

  1. edit.php

<?php

$id = $_GET['id'];

include 'config.php';

$file = mysqli_query($conn, "select * from blog WHERE id=$id");

while($fetch = mysqli_fetch_array($file)){?>

<!DOCTYPE html>

<html>

<head>

   <title>Edit Articles</title>

   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>

   <style>

       * {

           box-sizing: border-box;

       }

 

       label {

           padding: 12px 12px 12px 0;

           display: inline-block;

       }

 

       input[type=text], [type=date], select, textarea {

           width: 100%;

           padding: 12px;

           border: 1px solid #ccc;

           border-radius: 4px;

           resize: vertical;

       }

 

       input[type=submit] {

           background-color: #424ef5;

           color: white;

           padding: 12px 20px;

           border: none;

           border-radius: 4px;

           cursor: pointer;

           float: left;

       }

 

       input[type=submit]:hover {

           background-color: #45a049;

       }

       @media screen and (max-width: 600px) {

           .col-25, .col-75, input[type=submit] {

               width: 100%;

               margin-top: 0;

           }

       }

   </style>

</head>

<body>

<form action="edit-script.php" method="post" name="Form" enctype="multipart/form-data">

   <input type="hidden





Kimeandikwa na Rajabu Terehe 2023-03-01