How to auto create a new page based on inputs

martijnschuman · September 20, 2017

My school asked me for a website where they can post their pictures on. Pictures from camp/city trips etc. I said that I never build a website before, but I would like to try it. So I googled and googled, then almost a week later I have this (code is below the text)

I still have one problem:

I have a login page which can be accessed by the teachers, I have a upload button and a name field, so every time when they have new pictures they can upload them and choose a name. But there isn't happening anything with the data. Is it possible that it automatically creates a page based on a tamplate with the before indicated input? I read something about get and post, but I have no idea how I could use that. I also read something about MySQL, but I have absolutely no idea how I could use something like that.

So my question: How can I automatically create a new page, based on the input from another page.

This is the website: http://thorbeckefotos.tk/ In the top right corner is a small login button, if you press the botton, you go to the login page (username: user password: password) if you continu you see the page that can be accessed by the teachers.

Tamplate code:

<!DOCTYPE html>
<html>
	<head>
		<title>Thorbecke foto's</title>
	</head>
	<link rel="icon" href="images/logos/thorbecke.png">
	<body link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
		<img src="images/Banner.png">
		<a href="https://twitter.com/ThorbeckeSG"> <img src="images/logos/twitter.png" style="position:absolute; top: 5px; right: 153px;"></a>
		<a style="position:absolute; top: 12px; right: 20px;" href="https://twitter.com/ThorbeckeSG">Thorbecke Twitter</a>
		<a href="http://www.thorbecke-zwolle.nl"> <img src="images/logos/thorbecke.png" style="position:absolute; top: 37px; right: 163px"></a>
		<a style="position:absolute; top: 42px; right: 40px;" href="https://www.thorbecke-zwolle.nl">Thorbecke Site</a>
		<a href="https://www.youtube.com/channel/UCcGO0gpLrWdWMxmycPjh7Bg"> <img src="images/logos/youtube.png" style="position:absolute; top: 70px; right: 153px"></a>
		<a style="position:absolute; top: 72px; right: 5px;" href="https://www.youtube.com/channel/UCcGO0gpLrWdWMxmycPjh7Bg">Thorbecke YouYube</a>
		<a href="contact/index.php"> <img src="images/logos/contact.png" style="position:absolute; top: 92px; right: 153px"></a>
		<a style="position:absolute; top: 100px; right: 92px;" href="../contact/index.php">Contact</a>
		<br>
		<br>
		<br>
	</body>
	<link href='style.css' rel='stylesheet'>
	<ul>
		<li><a href="../index.htm">Home</a></li>
		<li><a>2017/18</a>
			<ul>
				<li><a href="Examenreis_Berlijn.htm">Examenreis Berlijn</a></li>
				<li><a href="Examenreis_Londen.htm">Examenreis Londen</a></li>
				<li><a href="Examenreis_Parijs.htm">Examenreis Parijs</a></li>
				<li><a href="Disco.htm">Disco klas 1</a></li>
				<li><a href="Biodag.htm">Biodag 3M</a></li>
				<li><a href="Introductie.htm">Introductie klas 3/4M</a></li>
			</ul>
		</li>			
		<li><a>2016/17</a>
			<ul>
				<li><a href="../2016,17/Werkweek.htm">Werkweek</a></li>
				<li><a href="../2016,17/Grote_Avond.htm">Grote Avond</a></li>
				<li><a href="../2016,17/Skiereis.htm">Skireis</a></li>
				<li><a href="../2016,17/Diploma_uitreiking_Atheneum.htm">Diploma uitreiking Atheneum</a></li>
				<li><a href="../2016,17/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li>
				<li><a href="../2016,17/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li>
				<li><a href="../2016,17/Galaklas2.htm">Gala klas 2</a></li>
				<li><a href="../2016,17/Examenreizen.htm">Examenreizen</a></li>
				<li><a href="../2016,17/Brugklasdisco.htm">Brugklasdisco</a></li>
				<li><a href="../2016,17/Introductie.htm">Introductie klas 1M/H/A 3M 4A</a></li>
				<li><a href="../2016,17/Open_Dag.htm">Open Dag</a></li>
			</ul>
		</li>
		<li><a>2015/16</a>
			<ul>
				<li><a href="../2015,16/Diploma_uitreiking_Atheneum.htm">Diploma uitreiking Atheneum</a></li>
				<li><a href="../2015,16/Diploma_uitreiking_Havo.htm">Diploma uitreiking Havo</a></li>
				<li><a href="../2015,16/Diploma_uitreiking_Mavo.htm">Diploma uitreiking Mavo</a></li>
				<li><a href="../2015,16/Ijsverkoop_onioth.htm">Ijsverkoop Onioth</a></li>
				<li><a href="../2015,16/Onioth_kamp.htm">Onioth kamp</a></li>
				<li><a href="../2015,16/Werkweek.htm">Werkweek</a></li>
				<li><a href="../2015,16/Talendorp.htm">Talendorp</a></li>
				<li><a href="../2015,16/Skiereis.htm">Skireis</a></li>
				<li><a href="../2015,16/Going_Global.htm">Going Global</a></li>
				<li><a href="../2015,16/Open_Dag.htm">Open Dag</a></li>
			</ul>
		</li>
		<li><a>2014/15</a>
			<ul>
				<li><a href="../2014,15/kerstdinner.htm">Kerstdinner 4/5H</a></li>
				<li><a href="../2014,15/Munster.htm">Münster</a></li>
				<li><a href="../2014,15/Gala_klas_2.htm">Gala klas 2</a></li>
				<li><a href="../2014,15/Grote_Avond.htm">Grote Avond</a></li>
				<li><a href="../2014,15/Lisabon.htm">Lissabon</a></li>
				<li><a href="../2014,15/Londen.html">Londen</a></li>
				<li><a href="../2014,15/parijs.htm">Parijs</a></li>
				<li><a href="../2014,15/Barcelona.htm">Barcelona</a></li>
				<li><a href="../2014,15/Auditie_Grote_Avond.htm">Auditie Grote Avond</a></li>
				<li><a href="../2014,15/Stadshangenrun.htm">Stadshagenrun</a></li>
			</ul>
		</li>
	</ul>
	<br>
	<br>
	<br>
	<br>
	<center>
		<h1>Disco klas 1 2017/18</h1>
		<img src="images/Disco/breed001.jpg">
		<img src="images/Disco/breed002.jpg">
		<img src="images/Disco/breed003.jpg">
		<img src="images/Disco/breed004.jpg">
		<img src="images/Disco/breed005.jpg">
		<img src="images/Disco/breed006.jpg">
		<img src="images/Disco/breed007.jpg">
		<img src="images/Disco/breed008.jpg">
		<img src="images/Disco/breed009.jpg">
		<img src="images/Disco/breed010.jpg">
		<img src="images/Disco/breed011.jpg">
		<img src="images/Disco/breed012.jpg">
		<img src="images/Disco/breed013.jpg">
		<img src="images/Disco/breed014.jpg">
		<img src="images/Disco/breed015.jpg">
	</center>
		<footer><h2><a font color="white" href="*download_url*">Download</h2></font></a>
		<h5>Gemaakt door Martijn Schuman</h5>
		<h5> Copyright 2017 All rights reserved. </h5>
		</footer>
</html>

Upload page code:

<?php
    // Start the session
    ob_start();
    session_start();

    // Check to see if actually logged in. If not, redirect to login page
    if (!isset($_SESSION['loggedIn']) || $_SESSION['loggedIn'] == false) {
        header("Location: index.php");
    }
?>

<html>
    <head>
        <title>Thorbecke fotos upload</title>
    </head>
		<link rel="icon" href="images/logos/thorbecke.png">
		<link href='style.css' rel='stylesheet'>
    <body>
        <img src="images/Banner.png">
    </body>
	
	<form method="post" action="logout.php">
		<input type="submit" value="Logout"><br>
	</form>
		<h2>Op deze pagina kan u een nieuwe activiteit aanmaken en foto's uploaden.</h2>
		<label for="activiteit">Activiteit:</label><br/>
		<input type="activiteit" placeholder="Activiteit"><br/>
		<br>
		<form action="upload.php" method="post" enctype="multipart/form-data">
			<input type="file" name="files[]" multiple>
			<input type="submit" value="Upload">
		</form>
</html>

dsonesuk · September 20, 2017

You have html code to search for file and submit, but! you have no php code to process these inputs to save file to a directory see:

https://www.w3schools.com/php/php_file_upload.asp

You can then create a php file to loop through these file in that directory, and show them on a page.

martijnschuman · September 20, 2017

I forget to add that,

Here is the code for the php process file:

(btw, English isn't my best language, sorry in advanced if I make some mistakes)

<?php 
if(!empty($_FILES['files']['name'][0])) { 
     
    $files = $_FILES['files']; 
     
    $uploaded = array(); 
    $failed = array(); 
     
    $allowed = array('jpg', 'jpeg', 'png'); 
     
    foreach($files['name'] as $position => $file_name) { 
         
        $file_tmp = $files['tmp_name'][$position]; 
        $file_size = $files['size'][$position]; 
        $file_error = $files['error'][$position]; 
         
        $file_ext = explode('.', $file_name); 
        $file_ext = strtolower(end($file_ext)); 
         
        if(in_array($file_ext, $allowed)){ 
             
            if($file_error === 0) { 
                 
                if($file_size <= 10485760) { 
                     
                    $file_name_new = uniqid('', true) . '.' . $file_ext; 
                    $file_destination = 'uploads/' . $file_name_new; 
                     
                    if(move_uploaded_file($file_tmp, $file_destination)){ 
                        $uploaded[$position] = $file_destination; 
                    } else { 
                        $failed[$position] = "[{$file_name}] failed to upload."; 
                    } 
                } else {
                    $failed[$position] = "[{$file_name}] is too large"; 
                }
            } else { 
                $failed[$position] = "[{$file_name}] failed to upload {$file_error}."; 
            } 
        } else { 
            $failed[$position] = "[{$file_name}] errored with code '{$file_ext}' is not  allowed."; 
        } 
    }
    if(!empty($uploaded)) { 
        print_r($uploaded); 
    } 
    if(!empty($failed)) { 
        print_r($failed); 
    }
}	
?>

dsonesuk · September 20, 2017

So you have read file names from directory and use it to create image tags in whatever layout you chose.

https://www.w3schools.com/php/func_directory_readdir.asp

martijnschuman · September 20, 2017

I have no idea how I could implement that in my code. The problem is, that when there is a pictures uploaded, it goes to a folder. Than it needs to move to a folder with the same name as the giffen name by the teachers. After that a tamplate page needs to be used where all the images are in. I just (manualy) added the pictures form Berlin, that are about 180 pictures. I want it to be 100% automated, so when I go to another school (this is my last year here) I don't need to add pictures everytime.

justsomeguy · September 20, 2017

You're going to have to learn a certain amount of PHP to do this if you want to create it yourself, if you don't understand PHP you won't be able to build a secure file upload site. In fact, you could make it vulnerable to all kinds of attacks. Hopefully your login process is secure.

For file handling in general, you can use the SplFileObject to work with individual files:

http://php.net/manual/en/class.splfileobject.php

You can use the DirectoryIterator to list and work with the contents of a directory:

http://php.net/manual/en/class.directoryiterator.php

Or the RecursiveDirectoryIterator to work with recursive directories (i.e., directories that have sub-directories, which have sub-directories, etc):

http://php.net/manual/en/class.recursivedirectoryiterator.php

You can copy an existing file (not a file that was just uploaded, one that is already saved):

http://php.net/manual/en/function.copy.php

And you can move files to a new directory:

http://php.net/manual/en/function.rename.php

martijnschuman · September 20, 2017

Sorry, but I have absolutely no idea how to use all of that.

justsomeguy · September 20, 2017

Then start at the beginning, with PHP tutorials. If you decided that you want to set up this website, good, but creating a website is not about copying and pasting until you're finished. If you don't understand how to use the tools then you need to learn, that's the only way to do it. There are plenty of resources you can use to learn how to write and understand PHP code, that's where you need to start.

Sign In

How to auto create a new page based on inputs

Recommended Posts

martijnschuman

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

martijnschuman

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

martijnschuman

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

martijnschuman

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity