-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathForms-and-Files.html
More file actions
216 lines (173 loc) · 10.5 KB
/
Forms-and-Files.html
File metadata and controls
216 lines (173 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>7 Forms and Files | PHP For The Web: Enough to be Dangerous</title>
<meta name="description" content="A primer on PHP with an emphasis on building for the web." />
<meta name="generator" content="bookdown 0.25 and GitBook 2.6.7" />
<meta property="og:title" content="7 Forms and Files | PHP For The Web: Enough to be Dangerous" />
<meta property="og:type" content="book" />
<meta property="og:description" content="A primer on PHP with an emphasis on building for the web." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="7 Forms and Files | PHP For The Web: Enough to be Dangerous" />
<meta name="twitter:description" content="A primer on PHP with an emphasis on building for the web." />
<meta name="author" content="Bryan Hoffman" />
<meta name="date" content="2022-01-01" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="prev" href="GET.html"/>
<link rel="next" href="SESSION.html"/>
<script src="libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js"></script>
<link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook-2.6.7/css/plugin-clipboard.css" rel="stylesheet" />
<link href="libs/anchor-sections-1.1.0/anchor-sections.css" rel="stylesheet" />
<link href="libs/anchor-sections-1.1.0/anchor-sections-hash.css" rel="stylesheet" />
<script src="libs/anchor-sections-1.1.0/anchor-sections.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">
<div class="book-summary">
<nav role="navigation">
<ul class="summary">
<li><a href="./">PHP For The Web</a></li>
<li class="divider"></li>
<li class="chapter" data-level="1" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i><b>1</b> Introduction and Prerequisites<span></span></a></li>
<li class="chapter" data-level="2" data-path="printing.html"><a href="printing.html"><i class="fa fa-check"></i><b>2</b> Printing in the Terminal and on the Web<span></span></a></li>
<li class="chapter" data-level="3" data-path="branching.html"><a href="branching.html"><i class="fa fa-check"></i><b>3</b> Branching and Conditionals<span></span></a></li>
<li class="chapter" data-level="4" data-path="loops.html"><a href="loops.html"><i class="fa fa-check"></i><b>4</b> Loops<span></span></a></li>
<li class="chapter" data-level="5" data-path="functions-and-recursion.html"><a href="functions-and-recursion.html"><i class="fa fa-check"></i><b>5</b> Functions and Recursion<span></span></a></li>
<li class="chapter" data-level="6" data-path="GET.html"><a href="GET.html"><i class="fa fa-check"></i><b>6</b> HTTP GET Variables<span></span></a></li>
<li class="chapter" data-level="7" data-path="Forms-and-Files.html"><a href="Forms-and-Files.html"><i class="fa fa-check"></i><b>7</b> Forms and Files<span></span></a></li>
<li class="chapter" data-level="8" data-path="SESSION.html"><a href="SESSION.html"><i class="fa fa-check"></i><b>8</b> SESSION<span></span></a></li>
<li class="chapter" data-level="9" data-path="Next.html"><a href="Next.html"><i class="fa fa-check"></i><b>9</b> What Next?<span></span></a></li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i><a href="./">PHP For The Web: Enough to be Dangerous</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<section class="normal" id="section-">
<div id="Forms-and-Files" class="section level1 hasAnchor" number="7">
<h1><span class="header-section-number">7</span> Forms and Files<a href="Forms-and-Files.html#Forms-and-Files" class="anchor-section" aria-label="Anchor link to header"></a></h1>
<p>I’ve got a vision of what to build next. Let’s try to build a very simple editable blog. In “real world” applications, we’d probably make use of databases, but for our purposes, let’s build the thing by writing to files. By writing to file, we can make things <strong>persistent</strong>. Storing things in PHP variables only lasts as long as the program is running, but saving results of programs to files or a database can leave a record. A record is something we can pull up again and again, and modify and save. For a lot of applications, persistent data is a necessity.</p>
<p>Let’s start by creating a simple HTML file at index.html:</p>
<pre><code><html>
<body>
<h1>Welcome to My Personal Homepage</h1>
<p>I can neither confirm nor deny ...</p>
<p>PHP may or may not mean Personal HomePage</p>
</body>
</html></code></pre>
<p>Displaying this with PHP is rather straight-forward. We create a file at index.php at put the following in it:</p>
<pre><code><?php
require('index.html');</code></pre>
<p>Serve your webpage with the following command in your terminal <code>>php -S localhost:8080 index.php</code> and navigate to it with your browser. You’ll see index.html rendered. PHP has pulled index.html in and rendered it in the browser all as a result of including that single “require(‘index.html’);” line.</p>
<p>We want to be able to edit index.html from the browser. Let’s include a link, but not in index.html. We’ll put the link in index.php, so that we can click to get into an editing mode. Include:</p>
<pre><code><a href="/?edit=true">Edit</a></code></pre>
<p>in your index.php file. You can use “?>” to exit the PHP code block and put it in as plain HTML or if you want the challenge, try to echo or print it with PHP.</p>
<p>In edit mode, we shouldn’t render the HTML file, we should pull it into a text field that can be edited and saved. We’ll use “isset()” to check the “$_GET” <strong>super global</strong> variable, and if we see “$_GET[‘edit’]” exists, we’ll render this form instead. To do that, we need to pull the file in to our program in a slightly different way. Below is the full code of index.php with these additions made:</p>
<pre><code><?php
// If the form was submitted write changes to file
if(!empty($_POST["text"])) {
// file_put_contentes writes to file
file_put_contents('index.html',$_POST["text"]);
}
if(isset($_GET['edit'])) {
// file_get_contents reads from file
$file_contents = file_get_contents('index.html');
// echo our form elements with $file_contents in the textarea
echo '<form method="post" action="index.php">';
echo '<textarea id="text" name="text">';
echo $file_contents;
echo '</textarea>';
echo '<input type="submit" value="submit">';
echo '</form>';
} else {
// render index.html
require('index.html');
// link to access edit mode
echo '<a href="/?edit=true">Edit</a>';
}</code></pre>
<p>That “$_POST[]” variable works much like “$_GET[]” does. It exists because we submitted a form or something similar, but if we simply load and render a page, nothing would be in the variable. By checking the contents of the variable before doing anything else, we can intercept the form data and save it to file before rendering the page. If we had reversed the order, the experience in the browser would be strange.</p>
<p>Order is important in programming. The math term for things that are order dependent is non-abelian. If you walk east for a mile and then walk north a mile, the result would be the same even if you switched the order. You’d end up in the same place, a little over 1.4 miles northeast of where you started. If you display a file and then make changes to it, well, that’s not going to have the same results as making the changes to it and then displaying it.</p>
<p>You’ve now built a very simple blog! Have fun and make it your own!</p>
<p>Exercises:</p>
<ol style="list-style-type: decimal">
<li>Can you build a web application that functions as a diary? Instead of opening a file and editing it, you might want to append to the file so that previous contents doesn’t get overwritten.</li>
</ol>
</div>
</section>
</div>
</div>
</div>
<a href="GET.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="SESSION.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
</div>
</div>
<script src="libs/gitbook-2.6.7/js/app.min.js"></script>
<script src="libs/gitbook-2.6.7/js/clipboard.min.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-search.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script>
<script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script>
<script src="libs/gitbook-2.6.7/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": false,
"facebook": true,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"whatsapp": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": null,
"text": null
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["PHP For The Web: Enough to be Dangerous by Bryan Hoffman.pdf"],
"search": {
"engine": "fuse",
"options": null
},
"toc": {
"collapse": "subsection"
}
});
});
</script>
</body>
</html>