| OLD | NEW |
| 1 --- | 1 --- |
| 2 layout: tutorial | 2 layout: tutorial |
| 3 title: "Get Input from a Form" | 3 title: "Get Input from a Form" |
| 4 description: "Using HTML forms and input elements to send data to a server" | 4 description: "Using HTML forms and input elements to send data to a server" |
| 5 has-permalinks: true | 5 has-permalinks: true |
| 6 tutorial: | 6 tutorial: |
| 7 id: forms | 7 id: forms |
| 8 next: indexeddb/ | 8 next: indexeddb/ |
| 9 next-title: "Use IndexedDB" | 9 next-title: "Use IndexedDB" |
| 10 prev: fetchdata/ | 10 prev: fetchdata/ |
| (...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 225 | 225 |
| 226 <img class="scale-img-max" src="images/client-server-comm.png" | 226 <img class="scale-img-max" src="images/client-server-comm.png" |
| 227 alt="Client-server communication in the slambook example"> | 227 alt="Client-server communication in the slambook example"> |
| 228 | 228 |
| 229 <hr> | 229 <hr> |
| 230 | 230 |
| 231 **Try it!** | 231 **Try it!** |
| 232 Enter some data and push the **Submit** button. | 232 Enter some data and push the **Submit** button. |
| 233 | 233 |
| 234 <iframe class="running-app-frame" | 234 <iframe class="running-app-frame" |
| 235 style="height:500px;width:525px;" | 235 style="height:500px;width:550px;" |
| 236 src="examples/slambook/out/web/slambook.html"> | 236 src="examples/slambook/web/slambook.html"> |
| 237 </iframe> | 237 </iframe> |
| 238 | 238 |
| 239 <aside class="alert"> | 239 <aside class="alert"> |
| 240 <strong>Version Note:</strong> The slambook app | 240 <strong>Version Note:</strong> The slambook app |
| 241 is compatible with | 241 is compatible with |
| 242 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.9</a
>. | 242 <a href="https://pub.dartlang.org/packages/polymer#versions">polymer.dart 0.10</
a>. |
| 243 </aside> | 243 </aside> |
| 244 | 244 |
| 245 The request gives you an innocent stare and displays "No server" | 245 The request gives you an innocent stare and displays "No server" |
| 246 because you are not running the server on your machine. | 246 because you are not running the server on your machine. |
| 247 Let's fix that. | 247 Let's fix that. |
| 248 | 248 |
| 249 ###Run the server | 249 ###Run the server |
| 250 | 250 |
| 251 Get the source code for the basic server program, | 251 Get the source code for the basic server program, |
| 252 slambookserver.dart, | 252 slambookserver.dart, |
| 253 from the | 253 from the |
| 254 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> | 254 <a href="https://github.com/dart-lang/dart-tutorials-samples/archive/master.zip"
> |
| 255 tutorials samples | 255 tutorials samples |
| 256 </a> | 256 </a> |
| 257 download. | 257 download. |
| 258 | 258 |
| 259 Run the server program from the command line: | 259 Run the server program from the command line: |
| 260 | 260 |
| 261 {% prettify %} | 261 {% prettify %} |
| 262 % dart slambookserver.dart | 262 % dart slambookserver.dart |
| 263 Listening for GET and POST on http://127.0.0.1:4040 | 263 Listening for GET and POST on http://127.0.0.1:4040 |
| 264 {% endprettify %} | 264 {% endprettify %} |
| 265 | 265 |
| 266 Now, you can try submitting data again with the slambook app above. | 266 Now, you can try submitting data again with the slambook app above. |
| 267 | 267 |
| 268 <aside class="alert"> | 268 <aside class="alert alert-info"> |
| 269 Note: If another program is already listening on localhost 4040, | 269 <b>Note:</b> If another program is already listening on localhost 4040, |
| 270 the server prints an error message and quits. | 270 the server prints an error message and quits. |
| 271 The app running on this page expects slambookserver to be at localhost 4040, | 271 The app running on this page expects slambookserver to be at localhost 4040, |
| 272 so for the app to work, | 272 so for the app to work, |
| 273 you have to kill the other process and start slambookserver again. | 273 you have to kill the other process and start slambookserver again. |
| 274 Alternatively, | 274 Alternatively, |
| 275 you can change the port number in both the client and the server code. | 275 you can change the port number in both the client and the server code. |
| 276 Avoid using 3030 because Dart Editor listens there. | 276 (Avoid using 3030; Dart Editor listens there.) |
| 277 Then run both the client and the server locally on your machine. | 277 Then run both the client and the server locally on your machine. |
| 278 </aside> | 278 </aside> |
| 279 | 279 |
| 280 The rest of this tutorial explains the code for both the client and the server. | 280 The rest of this tutorial explains the code for both the client and the server. |
| 281 | 281 |
| 282 On the client side, you learn about | 282 On the client side, you learn about |
| 283 | 283 |
| 284 * Submitting the form | 284 * Submitting the form |
| 285 * Resetting the form | 285 * Resetting the form |
| 286 * Using Polymer to bind the form data to variables in the Dart program | 286 * Using Polymer to bind the form data to variables in the Dart program |
| (...skipping 675 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 962 ###What next? | 962 ###What next? |
| 963 | 963 |
| 964 The next tutorial, | 964 The next tutorial, |
| 965 [Use IndexedDB](/docs/tutorials/indexeddb), | 965 [Use IndexedDB](/docs/tutorials/indexeddb), |
| 966 describes how to save data on the client | 966 describes how to save data on the client |
| 967 in the browser's Indexed Database. | 967 in the browser's Indexed Database. |
| 968 | 968 |
| 969 {% endcapture %} | 969 {% endcapture %} |
| 970 | 970 |
| 971 {% include tutorial.html %} | 971 {% include tutorial.html %} |
| OLD | NEW |