Better form for htmlInput and exploring POST messages.
This commit is contained in:
Offray Luna
parent
3b5c671a08
commit
89591a7c7f
@ -153,6 +153,115 @@ BreaMember >> html [
|
||||
^ self head, self htmlOutput
|
||||
]
|
||||
|
||||
{ #category : #public }
|
||||
BreaMember >> htmlInput [
|
||||
"I capture data in a HTML Form and use it to create a new BreaMember"
|
||||
^ '
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="A portfolio template that uses Material Design Lite.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||
<title>Add Member | GIG Network</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
||||
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-pink.min.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
<body>
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
|
||||
<nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
|
||||
<a class="mdl-navigation__link is-active" href="index.html">Portfolio</a>
|
||||
<a class="mdl-navigation__link" href="blog.html">Blog</a>
|
||||
<a class="mdl-navigation__link" href="about.html">About</a>
|
||||
<a class="mdl-navigation__link" href="contact.html">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
<div class="mdl-grid portfolio-max-width portfolio-contact">
|
||||
<div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp">
|
||||
<div class="mdl-card__title">
|
||||
<h2 class="mdl-card__title-text">Add new member</h2>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text">
|
||||
<p>
|
||||
Fill out the form.
|
||||
The fields preceded by [*] are obligatory.
|
||||
</p>
|
||||
<form action="#summit" method="POST" class="">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="givenName">
|
||||
<label class="mdl-textfield__label" for="givenName">[*]Given Name...</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="familyName">
|
||||
<label class="mdl-textfield__label" for="familyName">[*]Family Name...</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="email">
|
||||
<label class="mdl-textfield__label" for="email">[*]Email...</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="country">
|
||||
<label class="mdl-textfield__label" for="country">[*]Country...</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="organizations">
|
||||
<label class="mdl-textfield__label" for="organizations">
|
||||
[*]Organization(s)</label>
|
||||
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||
</div><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="website">
|
||||
<label class="mdl-textfield__label" for="website">Personal website...</label>
|
||||
</div><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="twitter">
|
||||
<label class="mdl-textfield__label" for="twitter">Twitter...</label>
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<input class="mdl-textfield__input" type="text" id="facebook">
|
||||
<label class="mdl-textfield__label" for="facebook">Facebook...</label>
|
||||
</div><br>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<textarea class="mdl-textfield__input" type="text" rows="5" id="tags"></textarea>
|
||||
<label class="mdl-textfield__label" for="tags">Tags (separated with commas)...</label>
|
||||
</div>
|
||||
<p>
|
||||
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect
|
||||
mdl-button--accent" type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="mdl-mini-footer">
|
||||
<div class="mdl-mini-footer__left-section">
|
||||
<div class="mdl-logo">Simple portfolio website</div>
|
||||
</div>
|
||||
<div class="mdl-mini-footer__right-section">
|
||||
<ul class="mdl-mini-footer__link-list">
|
||||
<li><a href="#">Help</a></li>
|
||||
<li><a href="#">Privacy & Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
'
|
||||
]
|
||||
|
||||
{ #category : #public }
|
||||
BreaMember >> htmlOutput [
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ Class {
|
||||
#name : #BreaWebsite,
|
||||
#superclass : #Object,
|
||||
#instVars : [
|
||||
'fossilRepo'
|
||||
'fossilRepo',
|
||||
'server'
|
||||
],
|
||||
#category : #Brea
|
||||
}
|
||||
@ -20,3 +21,35 @@ BreaWebsite >> fossilRepo [
|
||||
BreaWebsite >> fossilRepo: anObject [
|
||||
fossilRepo := anObject
|
||||
]
|
||||
|
||||
{ #category : #'server handling' }
|
||||
BreaWebsite >> routes [
|
||||
"Maybe the first part should be in a separate method."
|
||||
self server
|
||||
serveStatic: '/gig/demo' from: '/opt/gig/';
|
||||
GET: '/gig/members/test' -> [ :req | BreaMember new renderTestUserAsHtml ];
|
||||
GET: '/gig/members/add' -> [ :req | BreaMember new htmlInput ]
|
||||
]
|
||||
|
||||
{ #category : #accessing }
|
||||
BreaWebsite >> server [
|
||||
^ server ifNil: [ server := Teapot configure: { #port ->8080 } ]
|
||||
]
|
||||
|
||||
{ #category : #accessing }
|
||||
BreaWebsite >> server: anObject [
|
||||
server := anObject
|
||||
]
|
||||
|
||||
{ #category : #'server handling' }
|
||||
BreaWebsite >> start [
|
||||
"I define the routes and start the server"
|
||||
self routes.
|
||||
self server start
|
||||
]
|
||||
|
||||
{ #category : #'server handling' }
|
||||
BreaWebsite >> stop [
|
||||
"I define the routes and start the server"
|
||||
self server class stopAll
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user