Tip:
Highlight text to annotate it
X
>> COLUNA 1: Todos, certo bem-vindos de volta.
Isto é CS50.
E este é o começo de semana nove.
E isto é o início do resto seu tempo no CS50, em que
transição agora, finalmente, para a teia aspectos do curso, onde você
descobrir que muitos dos fundamentos que temos vindo a exportar para a semana
ainda voltar a visitar, ou assombrar, nós.
Mas agora, você vai descobrir que ele é um ordem de grandeza mais fácil
realizar determinadas tarefas e resolver certos problemas -
tanto que mesmo que você pensou determinados conjuntos de problemas eram divertidos em seu
própria maneira, eu acho que você vai encontrar que p ajuste 7, p ajuste 8, e então,
em última análise, o projeto final será tudo o mais gratificante, porque você vai
achar que começamos a tomar para concedido agora as coisas como gerenciamento de memória e
ponteiros, eo que está acontecendo por baixo do capô.
E, novamente, temática, durante todo o semestre foi tão camadas
e camadas.
E agora estamos espécie de up aqui, de pé sobre o
ombros de semana passado.
>> Agora, lembre-se da última vez que falou sobre como a internet funcionou.
E esse foi, talvez, um simplificação, mas lembre-se que
todos os computadores do mundo tem um IP resolver, apesar de que é um pouco de um
simplificação ainda.
E esses endereços são usados exclusivamente para máquinas, de modo que identificam
quando você envia informações, ou pacotes, por assim dizer, que eles podem ter uma origem
endereço e um endereço de destino.
E esses mesmos endereços IP podem ser usados tanto para o bem e também para o mal,
para rastreá-lo, por exemplo.
Na verdade, cada um de vocês com um laptop abrir agora, ou um telefone em seu
bolso, tem um endereço IP na rede de Harvard.
E não é tão difícil de correlacionar isso com quem e onde você
são estes dias.
Mas mais sobre isso talvez no futuro.
>> Agora eu pensei em trazer de volta alguns memórias de [? melhorar?] e dar-lhe
outro clipe de um show que você pode encontrar familiar.
Se pudéssemos diminuir as luzes por apenas alguns segundos.
O show Numb3rs.
>> COLUNA 2: É um endereço IPP4 32-bit.
>> COLUNA 3: IPP, como na internet?
>> COLUNA 2: rede privada.
À rede privada da Amita.
Ela é tão incrível.
>> COLUNA 3: Vamos, Charlie.
>> COLUNA 2: É.
Um endereço IP espelho.
Ela está deixando-nos ver o que ela está fazendo em tempo real.
>> Speaker 1: OK, então algumas coisas de errado com esta imagem.
Então, um, e este é aceitável, esta é realmente
não é um endereço IP válido.
Um endereço IP válido tem que ser números da forma w.x.y.z, onde cada um de
essas cartas é de 0 a 255.
Mas isso é bom, porque assim como o filmes onde eles números de telefone falsos,
eles falsificam endereços IP.
Você realmente não atingiu os servidores reais.
>> Mas lembre-se, este é um browser.
E navegadores não começar saída código de computador assim.
E se olharmos um pouco mais, observe que a linguagem que eles estão vendo
na tela é uma linguagem chamada Objective C, que é a língua em
que aplicativos para iPhone são escritas, particularmente os que envolvem
lápis de cor, como você pode ver a partir de o código de fonte aqui.
>> OK, eu pensei que isso era engraçado.
Então, esse trecho de código tem absolutamente nada a ver com o que esta
determinado episódio era sobre.
Portanto, a brincadeira é uma espécie de sobre os povos levando para este concedido.
Mas isso não é tão difícil de obter esses detalhes técnicos corretos.
E eu gostaria de incentivá-lo.
E, na verdade, 50 pode muito bem estragar um monte de shows de TV e filmes ou você
porque você vai achar que é só não é possível que eles estão
fazendo na tela.
Mas, na verdade, este é o código que você pode vê-lo em um aplicativo para iPhone
ou aplicação Mac OS.
Não tem nada em tudo a ver com segurança.
Portanto, manter um olho para fora para mais essas coisas divertidas como essa.
>> Mas hoje nós começamos a mergulhar realmente profundamente a toda uma gama de línguas.
Um fato, um dos mais abrangente tópicos desta porção do
curso não é para aprender a programar em PHP, não para aprender SQL, por si só, não
aprender JavaScript, por si só, mas em vez para ensinar a si mesmo como ensinar
yourself novas linguagens, porque, de fato, começamos a tomar agora a
rodinhas para que depois final do curso, você não espera que a 20
especificação página para dizer-lhe como implementar algum programa.
Você tem ingredientes suficientes na sua mente, e ferramentas suficientes na sua ferramenta
kit, com a qual começar a construir soluções para problemas de interesse
você por algum grupo de estudantes, para alguns projeto de pesquisa, ou realmente nada
de seu interesse.
>> Então, para esse fim, lembre-se que este era a imagem que desenhou última vez.
E isso é dois computadores, cliente e cortar, conversando uns com os outros.
E o protocolo, a linguagem, de modo a falar, que estes dois computadores acontecer
estar falando é chamado de HTTP.
E isso é apenas o protocolo usado pelo computadores para transferir informações sobre
a world wide web.
A web, é claro, é apenas um serviço que roda em cima do
chamado Internet.
O que é outro serviço disponível em topo da internet nos dias de hoje?
Algum outro protocolo ou - o que é isso?
>> AUDIÊNCIA: FTP.
>> COLUNA 1: FTP.
Então File Transfer Protocol é outra.
A maioria de vocês provavelmente não tê-lo usado.
Mas a maioria de vocês provavelmente já usado coisas como Gchat ou instantânea
Mensagens de um modo mais geral, certamente mail.
E aqueles, também, são os serviços que são executados em topo da internet, porque, no
final do dia, a própria internet realmente é só pegar os dados do ponto A ao
ponto B. E ele usa uma série de as partículas em si, um ou dois deles
deles mais geralmente chamado o TCP / IP, que é para dizer que um computador
a internet pode realmente estar fazendo coisas diferentes, e-mail,
e web, e assim por diante.
Google faz um monte de presente.
Então, como são os serviços com exclusividade identificado, não podemos dizer que, em um computador
que pode realmente estar fazendo várias coisas?
>> O número da porta.
E estes são apenas humana arbitrária convenções como 80 é web, 443 é
web criptografada, 25 é e-mail.
E há um cachos de outros.
E esses números são simplesmente incluídos na os pacotes de informação, aqueles
envelope virtual, que efectivamente continha um pedido ou uma resposta.
>> Então, quando você recebe de volta uma resposta do web, normalmente, você não vê qualquer
números de qualquer natureza em termos de código de status da resposta.
Você realmente não vê a funcionamento interno do
pacotes que vêm de trás.
Mas 200, de fato, significa OK.
E isso significa que está tudo bem.
Você pode ter visto um monte deles.
Que é provavelmente a mais comum você já viu na web?
>> 404.
Significa apenas que arquivo não foi encontrado.
Isso significa que alguém errou.
Você fez por erros de digitação da URL, ou alguém mais fez, dando-lhe um
URL inválido, ou que excluiu a arquivo ea URL é ainda
sendo usado por pessoas.
Assim, qualquer número de razões podem explicar por que um arquivo não foi encontrado.
E você vai ver, nas próximas semanas, esses outros códigos de erro, e você vai
tirar proveito de alguns deles.
O pior é 500.
Se você receber um erro 500 no código que você escrito, pense nisso como uma espécie de
análogo da SEG falhas no mundo da programação web.
Ele não é tão terrível.
Mas isso significa apenas que, em algum lugar, você errou.
Então olhe para a frente a eles.
>> Mas vamos ver se podemos vê-los em contexto.
Deixe-me ir para um navegador aqui e faça o seguinte.
Portanto, este é o Chrome, que passa a ser instalada no aparelho.
Mas a maioria todos os navegadores hoje em dia tem algumas funcionalidades equivalentes.
Eu estou indo para ir até o menu do Chrome, e vá em Ferramentas, e eu estou indo para ir
a Developer Tools.
E você vai ver que este painel pouco abre na parte inferior da janela.
Outro atalho, para ser honesto, que eu eu costumo usar é clicar com o botão direito
ou de controle clique em qualquer lugar na web página e vá para Inspect Element.
E que não só irá abrir isso tem para você.
Também será aberta, especificamente, a porção em Elementos
o lado esquerdo.
>> Então, nós estamos, naturalmente, vendo Google.
Eles mudaram seu logotipo hoje.
Mas, se eu rolar por aqui, observe que sob Elements, você vê
o que é chamado HTML, HyperText Markup Linguagem, e esta é a linguagem
que esta e todas as páginas da web, realmente, está escrito dentro
Mas na verdade é formatado para nós muito mais legível
do que normalmente é.
Na verdade, se eu diminuir o zoom, e eu, em vez apenas clique com o botão direito ou Control Click
clique sobre a página, e em seguida, vá em Exibir Página Fonte, este é literalmente o que
Google enviou para o meu browser.
>> Então, alguma pessoa ou pessoas escreveram Google.com usando este código-fonte.
A maior parte deste não é HTML.
É realmente uma linguagem chamada JavaScript, que
nós vamos chegar a quarta-feira.
Mas o Chrome, e que cada navegador pode fazer por nós, é uma espécie de ver
passado todas as distrações do sintaxe louco, e volte a colocar espaço em branco
para nós, e até mesmo destaque de sintaxe, ou colorir as coisas para nós.
Então você verá que os chamados ferramentas de desenvolvimento construído em navegadores
irá tornar sua vida muito, muito mais fácil porque você pode explorar, através deste menu
interface, exatamente o que o subjacente código fonte é para
qualquer página na internet.
E, de facto, esta é uma das mais formas eficazes para aprender a fazer
algo novo, pelo menos, se a página não é tão complexa como a submergir, é
para começar a picar ao redor é HTML, olhar em sua chamada CSS, que virá
para um bit, bem como, para obter uma a compreensão de como esse programador
implementaram algum especial característica da página.
>> Mas o mais interessante tecnicamente direita agora é que vai ser isso.
Se eu vá para a aba Rede, agora vamos limpar isso.
Eu estou indo para clicar a pequena atravessar símbolo aqui, e, em seguida,
ir para outro site.
E eu só vou escrever no Facebook.com.
No HTTP, HTTPS não, não WWW.
Vamos realmente ver o que acontece aqui.
>> Enter.
Agora, observe um monte de coisas só apareceu neste painel de fundo, em
Além da página web aparecendo no topo.
Eu estou indo para ir de volta para o Guia Rede aqui, e eu vou
clique na primeira linha.
O que esta ferramenta vai revelar-nos é cada uma das solicitações HTTP
que rapidamente apenas voltou e outro entre o meu navegador
eo servidor do Facebook.
E assim, cada uma dessas linhas representa um tal pedido, ou
resposta, um ou mais dos aqueles envelope virtual.
Ou mais casualmente, é como uma pessoa como uma pessoa, um cliente em uma
restaurante, pedindo algo de novo, e de novo, e de novo.
E o garçom continua trazendo de volta um de cada vez.
>> Então, agora, se eu aumentar o zoom em isso, observe e este será o tipo de coisa
que você está bem-vindo ao e encorajou jogar com a sua própria, porque nós
não vai passar por tudo em grande detalhe.
Mas repare que há uma alguns sub abas aqui -
Cabeçalhos, Preview, resposta, Cookies, e timing.
Eu só vou olhar para cabeçalhos por agora, porque estes são pouco
ingredientes dentro do envelope que ajudar a obter dados para e de lugares.
>> Então, primeiro, deixe-me clique neste, Vista Fonte próxima ao pedido cabeçalhos.
Não é o pedido que o meu browser, Cromado, neste caso, enviado dentro de
que o envelope virtual.
Você deve se lembrar, na semana passada eu digitou enquanto manualmente
fingindo ser um browser.
Em seguida, ele lembrou que o servidor é olhando para o host chamado
Facebook.com.
E então há um pouco mais misterioso informações que vamos acenar
nossas mãos agora.
>> Mas se eu começar a rolar agora em Nesta janela, deixe-me chegar ao
cabeçalhos de resposta.
Isso era o que é no virtual envelope que voltou de
Facebook.com.
E se eu clicar em Exibir código fonte apenas para ver o texto bruto do mesmo,
perceber algumas coisas.
Um deles, o Facebook também fala a mesma protocolo, a versão 1.1 do mesmo.
Então, isso é bom.
Mas o código de status 301, movido permanentemente.
>> Bem, onde diabos Facebook ir?
O que esta tentando passar para nós?
Bem, percebe-se aqui não há outra cabeçalho chamado Localização.
Então, por que é Facebook me dizendo que eles movido permanentemente para que URL
ao lado de Localização?
Eu esqueci o www.
>> Então essa foi a minha escolha.
Na verdade, a maioria de nós raramente, provavelmente, digitar www.whatever.com estes dias.
Mas acontece que um administrador de sistema, como Facebook do, pode
configurar os seus servidores de tal maneira que ou Facebook.com funciona, ou
www.Facebook.com funciona, ou, realmente, tal prefixo em frente da sua
nome de domínio.
Então, eles fizeram isso por nós.
E eles estão nos redirecionamento, provavelmente por alguma técnica,
algumas razões de marketing.
Eles só querem canonizar em www.Facebook.com.
>> Mas isso não é bem isso.
Se eu rolar aqui, vamos veja o que acontece.
Isso está me dizendo que movido permanentemente para
http://www.Facebook.com.
Então, vamos olhar para o segundo pedido que o meu navegador envia.
Infelizmente, parece que o Facebook mudou-se novamente porque a segunda
pedido, selecionando essa URL em vez disso, diz que, também, mudou-se
permanentemente.
E deixe-me rolar aqui para os cabeçalhos de resposta.
Onde tem Facebook foi agora?
>> Então HTTPS.
Então agora Facebook começou, particularmente à luz da actual
eventos nos últimos meses, em especial e Também no último par de anos
para obrigar todos os seus usuários, em um bom Assim, o uso de HTTPS, que é mais
seguro, embora não inteiramente segura.
E agora a minha página, meu navegador é vai solicitar esta terceira URL.
E agora, finalmente, temos o de outra forma invisível 200 OK.
>> Então, o que no mundo, ou todos estas outras linhas aqui.
Eu literalmente digitou uma coisa, e minha browser parece ter solicitado como
20 coisas estranhas.
O que é isso?
>> AUDIÊNCIA: Scripts?
>> COLUNA 1: Scripts, para que outros arquivos escritas em uma linguagem chamada
JavaScript, o que, mais uma vez, nós vamos ver um pouco na quarta-feira.
O que mais?
As folhas de estilo.
Então, alguma coisa em uma linguagem chamada CSS, o que vamos ver daqui a pouco.
Gifs, e JPEG e pngs e imagens, e arquivos de filme - o que uma página web
É mais provável que em a forma de um arquivo.
E assim, o que estamos vendo na esquerda lado, há todos os arquivos
que o Chrome teve que baixar, recursiva, se quiser, a fim de
compor a totalidade da página.
>> Então, o que nós vimos há pouco com o Google, se eu clicar sobre os elementos
tab, este, com certeza, é o HTML, o linguagem que compõe esta página.
Mas há cachos de outras coisas.
Há um logotipo.
Há aqueles azul-ish ícones lá.
E há outros elementos ainda em a página que se pode ser
arquivos separados.
>> Então, o que é agradável sobre um navegador é que ele olha para a linguagem que vai
para começar a escrever, ou você já escrita começou em P set 7, figuras
de onde esses arquivos viver e vai e agarra-los também.
E eu não posso enfatizar o suficiente, mesmo embora alguns isso pode parecer um pouco
arcano ou esmagadora, à primeira vista, aprender a programar
aplicativos para a web, é inestimável para compreender como estes
pequenas ferramentas de trabalho.
Trata-se de uma espécie de como GDB como ferramentas, mas muito mais simples, em última análise, para usar -
e realmente dá-lhe os olhos para o que temos vindo a tomar para concedido para
algum tempo agora.
>> Então o que podemos fazer agora com esta informação?
Bem, vamos realmente dar uma olhada Os conceitos subjacentes às HTML.
E vamos adiar, como já temos, para seções esta semana, para o problema
ajuste 7 especificação, a alguns dos mais particularidades de línguas.
Mas vamos ver se não podemos pintar um imagem do que você deve entender
geral aqui.
>> Então, HTML, HyperText Markup Language, não é uma linguagem de programação.
O que isso realmente significa?
Assim HTML parecido com este.
E alguns de vocês já sabem disso.
Alguns de vocês têm vindo a fazer isso há algum tempo.
Mas vamos ver se a gente não pode encher algumas lacunas bem.
Então, observe algumas coisas aqui.
Um deles, é apenas texto.
Assim é como o código-fonte em C, ou de algum outro idioma.
>> Observe que não parece ser um padrão aqui.
Não há recuo, mas tecnicamente o recuo é apenas humano
convenção.
A navegadores não se importa se há novo linhas e guias como vemos lá.
Mas note que não há simetrias aqui.
Não é o que eu chamo, na parte superior do esse arquivo, a tag aberta, ou o início
tag, chamado HTML.
E então, lá em baixo, perfeitamente alinhados acima, assim como fazemos com chaves,
vemos suporte aberto, para a frente slash, HTML, perto do suporte.
Então esse é o correspondente perto tag, ou no fim tag, para aquela coisa.
>> Juntos, tudo dentro do o chamado tag abrir e fechar tag
compor o que vamos chamar de um elemento.
E nós vamos ver, em apenas um momento, é realmente gosto de um nó em uma árvore.
Porque se você pensar agora a recuo que está implícito aqui, você
meio que tem, assim, um avô nó chamado HTML.
Quantos filhos você pode dizer, com base nesta imagem, o elemento HTML tem?
>> Então, provavelmente dois.
Um deles é o elemento principal, aparentemente.
E é o elemento do corpo.
E por dois filhos?
Bem, eu sou apenas um tipo de inferência que se Eu tenho uma marca de cabeça aberta e, em seguida, um
tag cabeça estreita, que é um elemento.
E então, se há um outro corpo aberto tag e uma tag corpo perto, é como
outro elemento.
Assim, no sentido de que se eu tipo de rotação a imagem do seu lado, é
como ter uma tag HTML, e depois um tag cabeça, e então uma tag corpo, e
em seguida, algum texto, Olá mundo, oscilando fora da própria tag body.
>> Assim, podemos desenhar um quadro que pode ser assim.
As formas são arbitrárias.
Mas note que eu usei uma espécie de elipse no topo para representar o
documento em si.
Acontece lá fora, pode ser outra coisa dentro de uma página web que eu não tenho
traçada aqui.
Então vamos até pendurar o HTML fora de nó de um chamado nó de documento.
E então nós temos cabeça e corpo e título, aviso prévio,
que está aninhado mais.
Eu não me incomodei colocar linha adicional rupturas dentro da tag title.
Ele só parecia que estava ficando um pouco detalhado.
Então eu deixei ele em uma linha ali, com título aberta, Olá mundo, próximo título.
E então nós temos algum texto pendendo fora daqui.
>> Portanto, esta imagem vai voltar para nós quando mergulhar em JavaScript.
Ea compreensão de que, quando você escrever HTML como esta, o que
é um navegador fazendo?
Bem, nós não temos que se preocupar com como ele está fazendo isso, ou com o que
algoritmo, mas no final do dia, quando um navegador recebe HTML como
que, do Facebook ou Google, ele analisa é, por assim dizer, ele lê-lo,
com algo como fread, de cima para baixo, da esquerda para a direita, e como ele
percebe, oh, tag aberta e feche tag, ele começa a malloc, por assim dizer,
um nó numa árvore.
E quando encontra, como já implícita aqui com o recuo, um
nó filho, mallocs um nó para que e anexado para que a árvore.
>> Assim, a estrutura de árvore, árvores binárias, árvores ternários, e árvores maiores, que
que olhou para uma ou duas semanas atrás, o aviso que é o mesmo princípio
voltando para nós.
E quem implementado, o que Chrome equipe fez que, presumivelmente, tinha
para implementar algum tipo de estrutura de árvore debaixo do capô.
E isso em si é, provavelmente, em um linguagem como C, C + + ou, ou uma menor
linguagem de nível que vamos agora usar no topo da web.
>> Então, agora, talvez, isso vai fazer mais sentido.
Tatuagem real de um cara que pode se arrepender, eventualmente, um pouco.
OK, tudo bem, então um monte de humor web.
Não está realmente acontecendo sobre tão bem hoje.
Então, vamos seguir em frente.
Tudo bem.
>> Então, vamos dar uma olhada agora em alguns exemplos.
O mais simples possível coisa pode ser isso.
Eu estou indo para ir em frente e abrir em gedit um arquivo chamado hello.php.
E aqui dentro, eu vou rapidamente apenas isso, printf, citar
unquote, "Olá mundo".
>> Assim, o aviso prévio, e eu vou fazer a minha barra invertida n, Eu não tenho preocupou em declarar principal.
Acontece que, em php, e um monte de idiomas, você não precisa de um principal
função de per se.
Você pode simplesmente começar a escrever seu programa.
Agora, quando eu salvar esse arquivo, repare que eu sou vai ter que fazer o seguinte.
Eu não vou usar make, e eu não sou vai usar bumbum porque PHP, ao contrário
C, não é uma linguagem compilada.
É o que se chama de interpretação linguagem, o que significa que você executá-lo
como uma entrada através de um outro programa chamado de um intérprete.
E esse programa lê-lo, de cima para baixo, da esquerda para a direita, e faz
o que você diga a ele para fazer.
>> Portanto, neste caso aqui eu tenho uma linha que diz printf.
Então, quando eu executar este código-fonte, ola.php, apesar de um programa que
acontece, convenientemente, a ser chamado de PHP, esse programa PHP vai ler
este arquivo, de cima para baixo, da esquerda para a direita, e vai fazer o que eu
diga a ele para fazer - a execução de código, e se ele não reconhece alguma coisa, apenas
cuspi-la.
Então, eu estou indo para ir em frente e executar PHP de hello.php.
Enter.
>> E isso não é bem o que eu pretendia.
Bem, por que isso?
Bem, PHP é uma linguagem que é realmente projetado para ser bastante
confunde com a web.
Ao fazer páginas da web com esta linguagem PHP, como veremos em breve, nós vamos
quero fazer algo parecido com impressão as linhas como esta.
>> Então eu vou fazer isso.
Abra o suporte, ponto de interrogação, PHP, e agora eu só vou recuar apenas para manter
coisas boas.
E agora eu vou fazer uma pergunta marcar perto do suporte.
Portanto, há um pouco de assimetria aqui.
Você não faz isso.
E você não fizer um corte, de modo PHP é um pouco diferente.
>> Mas agora, se eu reprise deste programa, PHP hello.php, agora eu
realmente obter Olá Mundo.
E nós vamos ver por que isso é valioso.
Um deles, que me permite especificar, Super explicitamente, este é
código, executar isso.
E isso é realmente o que estes tags especiais implica aqui.
>> Mas isso também significa que, se eu só faço algo como meu objetivo aqui, que
significa que, literalmente, que apenas ser impressos sem a necessidade de
realmente chamar printf, ou impressão, ou qualquer outra função semelhante.
Então, vamos voltar ao que em apenas um momento.
>> Primeiro, vamos fazer isso.
Dentro do aparelho, temos uma diretório chamado VHosts, para o Virtual
Exércitos, cortar host local, cortar público.
Então é um pouco prolixo, mas longa história Resumindo, o aparelho não foi projetado
apenas para apoiar C. É também projetado para suportar PHP.
Mas também é projetado para ser um web servidor, e um servidor de banco de dados.
E ele é projetado, e verdadeiramente configurado, para ser reminiscente de nenhuma
comercial da empresa de hospedagem que você pode pagar R $ 5 por mês para,
US $ 100 por mês para.
Seja qual for o serviço é, está configurado seja muito semelhante a um
servidor de produção no mundo real.
>> E o que isso significa é que a execução em o aparelho é um software de servidor web.
Ela passa a ser chamado de Apache.
É apenas livre e de código aberto, e muito popular.
E nós configuramos Apache saber que se eu visitar uma determinada URL, com
Chrome ou qualquer navegador dentro do aparelho, a olhar para este diretório
para os arquivos que o usuário está solicitando.
>> Em outras palavras, deixe-me vá em frente e faça isso.
Dentro do meu diretório público, eu vou para ir em frente e criar um arquivo
chamado index.html.
Isso me dá a guia aqui.
E eu estou indo para ir muito rapidamente e vá em frente e bater para fora
este programa.
Doctype HTML, o que, por agora, apenas supor que você tem que digitar.
É apenas uma tag arcano, que não é realmente uma tag HTML, que especifica que
aqui vem um pouco de HTML.
>> Eu estou indo para ir em frente e recriar o que vimos há pouco.
Aqui está a cabeça da página.
Dentro da cabeça era o -
assim título.
Então, vamos dizer Olá, mundo.
E então para cá foi a marca do corpo.
Deixe-me fechar a tag body.
E então, aqui eu também vou dizer, apenas para maior clareza, Olá mundo.
>> Portanto, esta é, sem dúvida, o mais simples possível página web você
pode fazer isso é válido.
É sintaticamente válido.
Tudo o que está aberta é fechada.
Tudo está bem em estilo e recuado.
Então, vamos ver agora como eu pode acessar esse arquivo.
>> Bem, deixe-me ir para o Chrome aqui.
E deixe-me ir http://localhost/index.html.
Então o que é host local?
Bem, a maioria de qualquer computador no mundo, Linux, Mac OS, Windows, tem um apelido
chamado host local.
Então, se você quiser falar para o seu próprio computador -
embora, estranhamente reflexivamente -
você se chama host local.
Não importa o que o seu computador atual é chamada, seja MacBook de David
Ar, ou algo mais detalhado como esse.
>> Portanto, este URL é, aparentemente, vai usar o HTTP para conversar com o host local,
no mesmo computador, o aparelho, e ele vai pedir, basta dar uma
acho, que arquivo?
Index.html.
Assim, o aparelho foi configurado no avançar para saber que, se eu estou pedindo
para algo como index.html, procure em uma pasta chamada VHosts, em um
pasta chamada localhost, em uma pasta aí chamados público.
É aí que todo o meu público arquivos vão ser.
Então, eu estou indo agora pressione Enter.
>> E, caramba, não é que proibido mensagem, também conhecido como 403, o
código numérico para isso.
Então o que está errado aqui?
Bem, não é suficiente apenas para colocar o arquivo dentro da minha pasta.
Eu preciso realmente fazer o seguinte.
>> Deixe-me ir para o meu diretório VHosts, em localhost, em público, e que
me fazer ls traço l.
E há algumas outras coisas aqui para fins de hoje.
Mas repare no lado esquerdo, ao lado para index.html, vemos apenas um RW.
E, no passado, o que tem RW representava?
>> Basta ler ou escrever.
O fato de que ele diz rw à esquerda Significa que, o proprietário deste arquivo, pode
ler ou escrever.
Mas eu preciso que todas as pessoas no mundo ler isso, mas não escrevê-lo.
Então, eu vou mudar o modo do arquivo, chmod, tudo para dar mais r
todos permissão de leitura no arquivo chamado index.html.
>> E se eu agora redigitar ls traço l, observe que, por aqui, um pouco mais
R da surgiram.
E, por agora, a especificação vai em mais detalhe.
Para P set 7, que apenas significa que todos agora pode ler este arquivo.
Se eu voltar para o meu navegador agora e recarregar, voila.
Olá, mundo.
>> E eu posso até mesmo abrir minhas ferramentas do Chrome e ver, assim como com o Google e
Facebook que não é o meu HTML, formatado um pouco
diferente e coloridos.
Se eu vá para a aba de rede e recarregar a página, observe que há a chegar
solicitar que o Chrome é o envio de para o aparelho.
Há o 200 para que arquivo específico.
Então, em suma, é assim que todos estes várias peças estão se encaixando.
O que acontece é que o servidor web estamos usando agora não é remota,
como o Facebook.
É, literalmente, no mesmo computador, o que é perfeitamente OK.
>> Então, o que mais podemos fazer em uma página web?
Bem, só, vamos brisa através um par dessas coisas.
Mas deixe-me ir em frente e reabrir Gedit com index.html.
E deixe-me ir em frente e dizer Olá CS50, salve este arquivo, volte para o
browser, muito abaixo do esperado mudança.
>> Mas o que se quer, na verdade, vincular a alguma coisa agora?
Assim, verifica-se que podemos ter a links em HTML que são apenas marcas
si.
Ela passa a ser chamado de tag âncora. a href igual
https://www.cs50.net, www.cs50.net próxima citação, perto do suporte.
E agora vamos ver o que o resto vem junto.
>> Eu abri a tag.
Agora eu preciso dar-lhe uma frase como CS50.
Deixe-me fechar a tag.
E notar algumas coisas.
Mesmo que não há essa coisa enigmática aqui, eu não tenho repetido quando você
fechar a tag.
Você acabou de fechar a tag com o seu nome sozinho.
E isso é o que é conhecido como um atributo com um valor.
Atributos apenas modificar o comportamento de alguma tag dentro de uma página.
>> Portanto, esta é a especificação de que a hiper referência, a maneira elegante de dizer o
URL para essa âncora, para este link, deve ser CS50.net.
E o texto que queremos mostrar a usuário não é que URL cru, mas sim
a palavra CS50.
>> Então, se agora eu recarregar, deixe-me zoom in para clareza, deixe-me recarregar a página,
notar que temos essa velha escola sublinhado azul link.
E se eu passar o mouse sobre ele, e ele vai ser difícil de ver, no canto inferior esquerdo
canto da tela, observe que diz que a URL para a qual
Eu estou indo para ir.
E se eu clicar ali, voila, agora eu estou fazendo páginas da web.
E nós nos levou para a página inicial.
>> Mas note que potencial este nos oferece.
A segurança é muito em voga nos dias de hoje.
E se eu, em vez dizer algo como isso, e eu em vez de ir para, por exemplo, vamos
ver, fakeCS50.net.
Recarregue esta página.
>> OK, assim que notar que ainda parece que estou vai CS50, a menos que um olho astuto
vai notar que eu estou indo para CS50 falso.
Eu estou supondo que este domínio não é tomada.
OK, então ele não está disponível.
Então, isso é bom.
Ninguém realmente tem esse domínio.
>> Mas vamos ser um pouco mais malicioso porque esse é o tipo de estúpido.
E se a gente mudar isso para Paypal.
E se nós chamamos este tipo, www.paypal.badguy.com,
qualquer que seja o domínio é.
Isso provavelmente existe.
Então, agora deixe-me recarregar a página.
E aqui temos uma espécie de phishing ataque, P-H-I-S-H-I-N-L, que é o
palavra bobo dado para um ataque que tenta informação peixe, ou, melhor
ainda, dinheiro, das pessoas, enganando los para proporcionar informação que
eles não poderiam fazer.
Isso parece totalmente legítimo, certo?
Eu devo ter um link aqui para Paypal.com.
Para ser justo, se eu sexados-lo com algum gráficos, podemos torná-la
mais como PayPal.
Certo?
Porque eu poderia, como um aparte, Eu poderia ir para Paypal.com.
E acabamos de ver como eu posso ver todo o seu HTML.
Eu poderia simplesmente copiá-lo e recriar a estética do Paypal ao invés de ir
velha escola aqui.
Mas repare, é claro, e é um pouco pequeno, ainda assim, apenas no fundo
canto esquerdo, como em um ponto 10 fonte, você vê o que você está URL
realmente vai ser levado a.
>> E por isso, se você já ficou de spam dizendo vá em frente, e você conta
foi comprometida.
Por favor, clique neste link e deixe-nos saber a senha para que possamos garantir que você é
você, nunca mais faça isso.
Estas coisas devem ir sem dizer.
Mas é maravilhosamente divertido, e trágico, como todos os anos, este parece
acontecer com alguns não nula número de pessoas.
>> E essa é a beleza de ataques de phishing.
Você pode enviar um milhão de e-mails.
E mesmo que 0,01% das pessoas que realmente clique no Paypal e dar-lhe o seu
senha, que ainda é um número diferente de zero de pessoas que acabou dando
lhe o seu dinheiro.
E envio de e-mails, é claro, é bastante fácil e, essencialmente, livre
nos dias de hoje.
>> Assim, longa história curta, maravilhosamente bela idéia, certo?
Anos atrás, este foi o primeiro web, permitindo uma rede de
hyperlinks entre recursos.
Mas tão rapidamente poderia ser utilizado para fins de doentes.
E-mail, basta dizer que, estes dias, já HTML embutida dentro.
>> Bem, deixe-me apenas uma coisa.
E vamos adiar em grande parte a seção conjunto de problemas de sete para permitir que você
explorar os detalhes.
Mas deixe-me ir em frente e fazer algumas coisas aqui.
Eu estou indo para ir e declarar o que é chamado um div ou
divisão, da página.
Deixe-me fechar a tag div.
>> E eu vou dizer-se aqui topo da página.
E, em seguida, abaixo deste, eu vou fazer algo como outra div, feche esta
tag, e fazer parte inferior da página.
E vamos salvá-lo.
>> Então agora vamos voltar para o meu arquivo.
Muito abaixo do esperado.
Mas o que é utilizado para a divisão, debaixo do capô, é que é verdade
um elemento estrutural agradável.
Ele não tem nenhum estética medida em podemos ver, para além de, aparentemente,
colocar as coisas em novas linhas.
>> Mas aviso, como um aparte, apenas bater Digite não cortá-lo em HTML como ele
não em C. Você pode pensar que isso é vai colocar uma grande lacuna legal entre
a parte superior e na parte inferior da página.
Mas é ignorado.
O espaço em branco é essencialmente ignorada em excepto a primeira páginas
personagem barra de espaço, ou retorno de carro que você bateu no teclado.
Se você quiser mais quebras de linha, você tem que especificar-lo sozinho.
>> Então, eu vou fazer algumas coisas aqui para mostrar o que está acontecendo.
Eu estou indo para adicionar um atributo que existe e, novamente, a maneira como você aprende
que atribui existe, o que existem tags realmente, é referências on-line.
HTML é o tipo de linguagem - é não é uma linguagem de programação.
É uma linguagem de marcação - que depois de um boa meia hora, talvez, de uma hora com
isso, você certamente vai entender, mais provavelmente, a idéia básica.
E, em seguida, uma pesquisa no Google para longe é tudo as possíveis marcas que você pode ser
interessado polegadas
E por a especificação, que é bastante boas-vindas e incentivadas aqui.
>> Então, agora deixe-me ir em frente e fazer algo assim.
Background-color.
E agora, eu vou fazer alguma coisa como vermelho, ponto e vírgula.
E você pode fazer isso em algumas maneiras diferentes.
Eu sou apenas um tipo de digitá-lo como super explicitamente quanto possível.
>> Mas verifica-se que este valor é aqui que é chamado de CSS, Cascading Style
Folhas, que é outra linguagem completamente.
CSS não tem nada a ver com abrir etiquetas e tags íntimos.
Tem a ver com as propriedades.
>> E as propriedades são de valor simplesmente chave pares, o que significa apenas uma palavra,
cólon e, em seguida, uma outra palavra.
E se você tiver vários queridos, ou apenas aqui, você pode terminá-la com um
ponto e vírgula, apenas para maior clareza.
Mas isso também vai funcionar aqui.
>> Agora, o que isso vai fazer?
Você provavelmente pode adivinhar.
Deixe-me ir em frente e recarregue esta página.
E agora ele está realmente bem vinda.
Então topo da minha página é o vermelho.
Mas o que é importante aqui é que, eu mencionei antes, que lhe dá div
uma divisão da página.
E isso é realmente o que ele faz.
É essencialmente divide a página em um retângulo que você pode, então,
manipular.
>> E essa noção de retângulos é uma espécie de convincente em que, se você pensar em
mais qualquer site, há provavelmente alguma estrutura que lhe.
A maioria de vocês já deve ter visto raramente Página inicial do Facebook, se você estiver logado
em todo o tempo.
>> Mas na página inicial do Facebook, há algum tipo de div, ao longo do topo.
E isso pode não ser tão simples como uma div, mas não há uma
lá da região rectangular.
O resto da página é como uma enorme div, como um grande
maior região retangular.
Assim, longa história curta, apenas por ter esses pequenos blocos de construção, os
capacidade de coisas modelo como retângulos, se larga ou estreita, você também pode
fazer colunas potencialmente, permite que você lay out páginas, realmente, mas você
gostaria.
Nós realmente estamos apenas arranhando a superfície aqui.
>> Na verdade, se eu fizer um outro, deixe-me ir em frente e fazer estilo,
background-color, vamos fazer alguma coisa como azul, citações próximos.
Vamos recarregar esta.
Então, agora está ficando ainda mais feia.
Mas agora eu posso tipo de show off minha P definir cinco habilidades, certo?
Vermelho.
Isso me lembra de RGB, Vermelho Triplica verde e azul.
Bem, ao que parece em programação web, ou web design, o que é isso, temos
ainda não programou nada por si só, você pode realmente
tem o código hexadecimal.
Então, alguma coisa alguma coisa, alguma coisa alguma coisa, alguma coisa alguma coisa.
Então você pode ter seis hexadecimal caracteres, ou três, em alguns casos,
e cada um desses pontos de interrogação Tem que haver uma dígitos hexadecimais
zero a f.
>> Se eu quiser ter um monte de vermelho, e nenhum verde, e não azul, que é a
oposto do zero quando usando hexadecimal?
É f.
Então eu posso fazer ff, zero zero, zero zero, salvar este, e agora vem aqui.
E eu realmente não ver uma mudança.
Então citação unquote "red" é, aparentemente, sinônimo para todo vermelho,
nenhum verde, não azul.
Enquanto isso, vamos mudar deliberadamente este ser algo
aleatória, como ABCDF.
>> Vamos ver o que é.
É realmente um bom azul, na verdade, azul bebê.
Tudo bem, então estes são apenas agora combinações de mais ou menos aleatórias
caracteres.
Portanto, não vamos ficar atolados aqui.
Mas, novamente, isso fala com a precisão que você pode começar a
aplicar - mesmo se você estiver muito sobrecarregado pela estética.
Na verdade, se você realmente quer ser impressionado, deixe-me ir em frente e mudar
o tamanho da fonte, por exemplo.
E observe o ponto e vírgula, que É necessário aí.
>> Tamanho da fonte, que pode ser simplesmente ridículo aqui, 96 pontos.
Salve isso.
Uau, isso é um tamanho de fonte grande.
Tudo bem, por isso é muito fácil.
E, na verdade, você está essencialmente vendo primeira página web que fiz
anos atrás, quando pela primeira vez Aprendi essas coisas.
É muito fácil de fazer muito coisas horríveis rapidamente.
>> E se você estiver familiarizado com o Wayback Máquina em archive.org, você
pode encontrar toda a minha hediondo páginas web de graduação.
Um tinha Caco, o Sapo na frente.
Eu passei por uma fase em que eu pensei foi legal para levar o pano de fundo
uma cortina vermelha, quando eu aprendi como você can imagens de azulejos de novo, e de novo, e
novamente, para encher uma página com uma grande cortina vermelha brega.
E então, em cima disso, foi um ícone que você tinha que clicar para entrar na minha casa
página porque era muito em voga.
>> E então meu primeiro programa que eu já escrevi Não era no PHP, mas em uma linguagem
chamada Pérola, escreveu um livro de visitas, que é uma coisa muito legal que a
Muitas pessoas esperam que você ter em uma home page.
Quando você chegar à página, eles querem que você para entrar e dizer quem você é,
e por que você está lá.
Isso é muito 1990 web design estilo.
>> Mas nos dias de hoje, com certeza, temos vir muito mais longe.
E você vai ver, na seção, e até mesmo no problema de definir sete, por
alavancar bibliotecas estes dias, é muito mais fácil de fazer
coisas mais bonitas rapidamente.
Realmente aqui, estamos apenas arranhando a superfície do que você pode fazer
estilisticamente.
>> E, de fato, já, deixe-me enfatizar que isso já está ficando feio, não
só esteticamente, mas em termos do estilo do meu código, ou o
design do meu código.
Tenho atualmente comingled HTML, que é as tags abertas esverdeados lá, com
Propriedades CSS, que é totalmente legítimo.
Isto é realmente onde a língua teve suas origens.
>> Mas no interesse de design clean, bem como começamos coisas factoring
para fora de arquivos C em arquivos h., vamos me realmente praticar esse tipo de
princípio e começar a fazer esta vez.
Deixe-me colocar uma marca de estilo aqui, que também existe em HTML, e deixe-me
especificar a seguir.
Deixe-me apagar isso.
Cor de fundo vai ser vermelho.
Eu vou apagar isso inteiramente.
Eu estou indo para se livrar do estilo atribuir, e eu vou com exclusividade
identificar esta div com uma palavra -
arbitrariamente, mas razoavelmente, citações unquote "top". E id é uma especial
atributo que define exclusivamente um determinado elemento HTML
como ter esse id.
>> Se agora eu quero estilizado que, até aqui, em a cabeça de minha página, dentro do
tag estilo, observe que Eu posso fazer top hash.
E então eu posso colocar um par de encaracolado aparelho, que lembra C, e então deixá
me colar em que estilização.
E deixe-me ir em frente aqui e antecipar onde estou indo com isso.
Permitam-me também criar uma para o div de fundo.
Deixe-me pegar esse código horrível de baixo aqui, colocá-lo aqui, e eu vou estar
um pouco mais *** agora e estilizado que por apenas colocar as coisas em seu próprio
linha, terminando com ponto e vírgula.
Deixe-me livrar-se da marca de estilo.
>> Mas eu não estou pronto ainda.
Eu preciso fazer uma outra coisa.
Sim, id iguais citação fecha aspas, "bottom", ou qualquer id eu quero
dar a esse elemento.
Agora, deixe-me voltar para cá.
E isto é atroz.
Eu não posso lidar com 96 pontos.
Vamos fazer 24 pontos.
Ou você poderia ser mais preciso.
Você pode realmente usar pixels, px, então que você realmente granulação mais fina
controle sobre a sua página.
>> Como um aparte, que não é necessariamente a melhor coisa que se os usuários, para
razões de acessibilidade, quer ser capaz de aumentar os tamanhos.
Então, percebo que há maneiras de fazer coisas que não necessariamente
codificar tudo difícil.
>> Tudo bem, por isso é maior, de 24 pontos, que qualquer que seja o padrão é.
Mas agora é um pouco mais limpa.
E deixe-me dar um passo adiante.
Assim como a idéia de arquivos de cabeçalho, perceber que estamos um passo mais perto disso.
Eu tenho consignado, mas ainda restam, dentro da minha página, essas regras CSS.
Por que eu quero dar um passo ainda, eliminar esta completamente, e
colocá-lo em um arquivo separado?
>> Para que eu possa reutilizá-lo, certo?
Esta é apenas uma espécie de intuição agora.
Antes, eu afirmava que era apenas ficando feio ter o estilo
atributos dentro do DIVS si.
Mas apenas uma espécie de pensar que passar.
Como sua página fica mais e mais, se você está colocando aqui, e aqui, e
aqui, e aqui, todos estes diferentes cores e tamanhos de fonte e outras
atributos, sua página é muito rapidamente vai tornar-se incontrolável para você.
>> Se alguém chega até você e diz, oh, você sabe o quê?
Eu realmente gostaria de mudar o tamanho da fonte por dois pontos adicionais, você
pode ter que ir e localizar e substituir um grande número de linhas de código.
É muito mais atraente para centralizar todas estas aqui estética.
Mas se você quiser reutilizar os estética em várias páginas da web, todos os
o mais interessante para, por exemplo, criar um arquivo
chamado com esses conteúdos.
>> E deixe-me fazer isso.
Salve este arquivo.
Eu digo styles.css, arbitrária mas convencional.
Vou colocá-lo na casa de John Harvard diretório agora pela simplicidade.
E o que posso fazer na minha página web é obter livrar da marca de estilo por completo,
e um pouco unintuitively, utilize um link tag, que não dar-lhe um link no
o hiperlink, sentido clicável, mas onde eu digo link, é igual a href
styles.css.
E a relação que este elemento tem com a página web é servir como
sua folha de estilo.
>> Então como é que eu sei disso?
Um deles, que você acabou de ler o manual, ou você Google ao redor, e você
olhar para vários recursos.
Quero dizer, que realmente é como você pegar técnicas como esta, e, de acordo
com essa idéia de ensinar a si mesmo novo linguagens, mais uma vez, você vai descobrir que
só há um número finito de coisas a qualquer linguagem que, uma vez que você começa
eles, você verá que ele fica mais e mais rápido a escrever.
Na verdade, a aprendizagem de uma nova programação idioma é muito mais rápido do que uma nova
língua falada, porque essas coisas são muito menores e muito mais
definidos com precisão.
>> Mas eu destacado um pouco de uma anomalia aqui.
Por que eu destaquei esta barra aqui?
Porque eu tenho que fechar a tag.
Eu deveria fechar a tag.
E você vai encontrar inúmeros recursos on-line que não
necessariamente marcas próximos.
E realista, não é estritamente necessária para a técnica e existem
razões da realidade, os navegadores são apenas bastante tolerante a erros na web
páginas, para melhor ou para pior, mas principalmente pior.
>> Então, isso aqui é apenas uma maneira mais limpa de dizer algo estúpido como esse,
onde se pretende abrir a tag link mas fechá-lo, não há realmente nenhuma noção
de conteúdos para a tag link.
Significa apenas que carregar este arquivo e colocá-lo aqui.
É como include acentuada C. Pode abrir e fechar uma tag de uma só vez
dentro da mesma tag.
E há outros exemplos.
Esta não é a maneira de fazer isso, mas a tag br, para quebras de linha, se eu
realmente queria alcançar o que eu era tentando antes de pressionar Enter, se
Eu explicitamente dizer quebra de linha, quebra de linha, quebra de linha, quebra de linha, e
então recarregar esta página, agora você vai notar que a parte inferior da página é,
na verdade, muito mais longe no na parte inferior da página.
Mas mesmo isso pode ser feito muito mais limpa com CSS, e com margens,
e com outro tipo de estética técnicas.
>> Então, por agora, o delivery é isso.
Em HTML, temos estes coisas chamadas tags.
Em CSS, temos essas coisas chamadas de propriedades.
Podemos comingle essas duas linguagens, ou usando o atributo de estilo,
ou a tag estilo, ou melhor ainda, factoring -lo por completo, como fazemos
no conjunto de problemas 7.
Perguntas, então, sobre o fundamentos conceituais aqui?
>> AUDIÊNCIA: Eu tenho uma pergunta.
>> COLUNA 1: Oh, desculpe.
>> AUDIÊNCIA: Por que não foi colorida -
>> COLUNA 1: Oh, na outra aba?
Este aqui?
>> AUDIÊNCIA: Não, é como se o -
>> COLUNA 1: Oh, isso é porque Eu estava sendo desleixado.
Eu coloquei o arquivo no lugar errado.
Então, se eu realmente colocá-lo aqui, e eu chmod, tudo + r para styles.css e
agora recarregar a página, agora nós obter a estilização de volta.
E porque os tamanhos de fonte são diferente, não vemos tão grande
espaço em branco.
Em seu lugar, ver o que está a padrão é de vez.
Boa pergunta.
Sim?
>> AUDIÊNCIA: Por que é o elo tag dentro do cabeçalho?
>> COLUNA 1: Por que as ligações tag dentro do cabeçalho -
resposta curta, apenas porque.
Isso é o que foi decidido.
É onde as tags de link ir quando Você tem o que é chamado de
folha de estilo externa.
Outras perguntas?
>> Tudo bem, bem, vamos fazer isso.
Nós nos divertimos muito à frente de nós hoje.
Isso é apenas arranhando a superfície do CSS.
Vamos fazer isso.
Vamos dar uma pausa de cinco minutos aqui porque, por meu e-mail, vamos pendurar
lá até 2:30-ish hoje.
Mas se você tem a sair, isso é bom.
Mas vamos seguir em frente depois de uma pausa de cinco minutos.
E nós vamos aprender um pouco sobre PHP, MySQL, e muito mais.
>> Tudo bem, então vamos tentar, agora, para amarrar um algumas dessas idéias juntos e fazer,
dizer, o nosso próprio motor de busca.
Notei, curiosamente, a seguir.
Quando você está no Google.com, você está normalmente a uma URL como esta aqui
com nada após o dot com.
Mas se eu procurar algo estúpido como gatos e aperte enter, nós vamos chegar - não
estúpido, mas você sabe.
>> OK, assim que notar, no topo da página, Agora, o URL tem, é claro, mudou.
E isso não é nada novo para qualquer um de nós.
Você clica em links e outras coisas acontece na web.
Mas o que é interessante aqui é o seguinte.
Há um monte de confusão, mas vamos me jogar fora coisas que eu não faço
entendo muito bem ou não olhar realmente relevante.
>> Deixe-me livrar disso.
Deixe-me livrar disso.
E deixe-me apenas se livrar de tudo isto.
E agora notar que os gatos está na URL, seguido com um q, então um igual
assinar na frente dele.
Então não é que esta é a forma como o assim que funciona quando se trata
para entrada e saída.
>> Nós conversamos muito sobre caixas-pretas, certo?
Assim, se esta é uma função implementada aqui como uma caixa preta, que leva entrada
e produz uma saída, bem como, os meios pelo qual você fornecer dados para a
website é de forma, muitas vezes, de sua URL.
Você simplesmente colocar um ponto de interrogação e, em seguida, uma chave igual valor.
E então, talvez um e comercial, e, em seguida, outra chave é igual ao valor, então talvez
outro comercial, chave igual valor.
É assim que você passar em chaves e valores, pares de entradas.
>> Então, se eu pressionar Enter, agora, o que é interessante sobre o Google é que todos
que confusão eu deletei não aparece seja estritamente necessário.
Tudo que eu preciso enviar para o Google é a pergunta marca q é igual a gatos para obter
fazer alguns gatos.
Bem, a implicação de que, então, é se eu puxar para cima gedit, eu comecei
fazer o meu próprio motor de busca aqui em um arquivo chamado seach0.html.
>> E deixe-me ir em frente e excluir mais uma linha que você
não deveriam ver.
E agora, deixe-me ir para o meu próprio navegador, portanto, não para o Google, e ir para
http://localhost.
E isso vai ficar no caminho.
Então, nós vamos ter de dizer adeus ao que, por agora, mover este aqui,
oh, agora vamos ter que dizer adeus a esse arquivo.
>> Sempre que você tem um arquivo chamado index.html ou index.php em um
diretório, se o servidor web é configurado dessa forma, o que você vai
ver, por padrão, é o conteúdo do que arquivo ao invés de uma listagem do
diretório, como eu queria aqui.
Leia mais sobre este assunto na spec.
Você não viu isso.
>> Então é isso que eu realmente queria.
Mas há um momento, houve uma arquivo nesta pasta chamada
index.html e index.php.
E para que o servidor web foi me mostrar esses arquivos.
Em vez disso, eu quero que esse diretório listando aqui.
>> Então, eu estou indo para ir para CSS e ir para search0.
E eu afirmo que este é que vai ser o início da minha própria competitivo
motor de busca.
E para fazer isso, eu estou indo para ir em aqui, em CSS, e abrir-se com
gedit, pesquisa 0.
Mas, infelizmente, não há não muita coisa acontecendo aqui.
Tudo que eu fiz foi usar um tag título, que passa a ser chamado H1, que
significa, essencialmente, grandes e negrito, e é isso.
Mas os meios pelos quais podemos fornecem insumos são através destes
coisas chamadas formas.
>> Então deixe-me ir em frente e abrir e fechar, preventivamente, uma tag de formulário lá.
E deixe-me ir em frente e fazer algo como isto.
Entrada, tipo de texto é igual.
E então vamos fechar a tag dentro os próprios suportes.
Eu não preciso para começar um campo de texto e parar um campo de texto.
Ele só vai estar lá ou não.
>> E, em seguida, abaixo disso, vamos fazer tipo de entrada é igual a enviar.
Salvar esta.
E agora vamos fazer um verificação de sanidade rápida.
Vamos recarregar.
>> OK, por isso não é ruim.
Não é o estilo do Google, mas é bem perto.
Há um campo de texto.
Eu posso escrever algumas coisas em, pressione Enter, mas nada acontece ainda.
E isso é porque eu não especificou uma ação por esta forma, por assim dizer.
Então, se eu voltar para o elemento de formulário, ao que parece, e eu sei que isso só
de ter lido a documentação, que a tag form tem um atributo
chamado de ação que é a URL do site para o qual você
deseja enviar o formulário.
>> Eu realmente não acho que temos tempo para implementar todo o back-end para a
motor de busca hoje em dia.
Então vamos apenas dizer, eh, ir para google.com / search.
E agora deixe-me fechar minhas citações.
E deixe-me especificar melhor que o método a utilizar vai
a ser chamado de obter.
>> Para encurtar a história, há duas maneiras, pelo menos, que você pode enviar informações
a partir do navegador para o servidor.
Um deles é conseguir, e, para fins de hoje, isso apenas significa na URL.
Você vê exatamente os pontos de interrogação, os sinais de igual, e que ampersands
vimos anteriormente.
Ou há uma alternativa chamada post.
Por enquanto, sabemos que o pós é frequentemente usado quando você quer fazer upload de arquivos, como
imagens e assim por diante, ou quando você quiser enviar informações de cartão de crédito, ou
senhas, qualquer coisa que ele não realmente faz sentido, conceitualmente, ou
segurança sábio, para acabar na URL de seu navegador, onde espionagem pais,
ou companheiros, ou qualquer um com acesso para o seu computador pode ver.
>> Então, vamos guardar esse aqui.
E eu preciso fazer outra coisa.
Não é suficiente apenas para dizer-me dar um campo de texto.
Eu tenho que dar do que o campo Valorizamos um nome.
Então deixe-me emprestar escolha do Google nomes, Q e especificar que segundo
atribuir Eu realmente não me importo sobre o nome do botão enviar.
Tudo que me importa é a apresentação o que o usuário digita pol
>> E agora esse é o tipo de feio.
Ele apenas diz enviar.
Acontece, e eu sei isso desde o documentação, eu posso realmente dizer
valor equivale a citação unquote "CS50 da pesquisa, "perto das citações.
Então vamos recarregar novamente.
Então eu continuo batendo Command-R, ou Control-R no meu teclado para recarregar.
>> Agora temos um mais interessante motor de busca.
Ele não chega a parecer Google ainda, no entanto.
Então, vamos em frente aqui e fazer um pouco de quebra de linha.
>> OK, então agora temos o Google.
Na verdade, quase não tem Google.
Então agora o que vai acontecer?
Vou escrever algo como Cats.
E o navegador vai analisar de que forma que eu definido.
E vai enviar o usuário a esse URL.
Então, desta vez, por algum motivo curioso, Tenho mais informações sobre estoques
do que sobre os gatos reais.
Mas isso é bom, porque percebe que ainda acabei aqui, q é igual a gatos.
>> Assim, longa história curta, parece bastante trivial para obter a entrada do usuário.
E para ser justo, há cachos de outros tipos de campos de formulário.
Há caixas de seleção e pouco mutuamente botões exclusivos e
menus drop-down, e muito mais.
Mas todos esses são como relativamente facilmente implementado como
este campo de texto era.
E, finalmente, só temos que fazer certeza de que alguém está escutando no outro
Fim da linha para conseguir que informações processadas, de alguma forma, e
nos devolver os nossos gatos.
>> Vejamos um pouco mais envolvidos exemplo.
Deixe-me ir para o diretório do meu VHost, em host local, público, e onde eu
colocar o código fonte de hoje.
Tudo isso vai estar no curso de website para que você possa mexer.
E se eu entrar em froshims, deixe-me abrir se este arquivo agora, froshim0.php.
Este é um pouco mais detalhado, assim não vamos escrever isso a partir do zero.
Mas só agora perceber alguns um pouco características familiares.
>> Um, tag form, ação diferente.
Não é uma URL completa.
Agora, é aparentemente para arquivo chamado register0.php porque, em um momento,
Vou ensinar-me um pouco algo sobre PHP, uma programação
língua, porque o PHP pode ser usado para implementar o Google implementado como
o back-end de seus motores de busca.
>> Google, na realidade, provavelmente usa alguns Python, alguns C + +, e
cachos de outras línguas.
Mas certamente poderíamos implementar a pesquisa resultados utilizando PHP, se quiséssemos.
Mas, por agora, vamos mantê-lo simples.
E isso é realmente uma reminiscência de uma dos outros primeiros sites que eu
fez anos atrás.
>> Na minha época, você se cadastrou para esportes internos como um calouro por
preenchimento de um pedaço de papel, andando em todo o quintal, e soltá-lo em
a caixa de correio de um Proctor em Wigglesworth, e foi assim que você
registrada.
E assim o meu projeto logo após CS50, era colocar que, o que torna perfeito
sentido, para a web, o que não foi como em voga, em seguida, como é agora.
Mas tudo o que tinha a fazer era criar, essencialmente, um formulário HTML.
>> E essa forma olhou mais ou menos assim.
Eu tinha uma entrada para o O nome de calouro.
Eu tinha uma outra caixa de seleção ou ou não queria ser capitão, que
seu gênero era, e o seu dormitório era.
E então eu codificado em coisas como Apley Court, e Canaday,
Cinzas, e assim por diante.
>> Então, novamente, novas tags.
Ainda não vi isso antes, novo atributos, mas bastante acessível.
Uma vez que você ver um exemplo, você pode tipo de emprestar essa idéia e fazer uma queda
menu para mais nada no estômago.
Mas o que é importante é que cada um dos essas coisas têm nomes.
E na parte inferior do formulário, há um botão de envio cujo rótulo,
ou valor, é registo.
>> Então vamos para esta página.
Deixe-me voltar para o listagem do diretório.
Deixe-me entrar em froshims, e ir para froshim0.php.
Por isso, é horrível, para ser justo.
Então, eu definitivamente poderia estilizar este com um pouco de CSS, eu poderia fazer algum
gráficos, talvez adicionar algumas cores, e tornar esta mais bonita.
Mas funcionalmente, eu diria que este é realmente muito completo.
>> Infelizmente, quando eu preencher isso, David, Capitão, Homem, vamos escolher,
digamos Matthews, Register, tudo o que acontece é o seguinte.
Mas note um par de delivery.
Um deles, o arquivo retornado aos resulta, aparentemente,?
Assim é, de fato, register0.php.
Assim, o fato de que nós vimos que a ação valor há um momento para register0, este
confirma que de fato acabou se naquele arquivo particular.
>> Agora, este é apenas um texto feio.
Mas note que este texto é vindo de host local,
que é produzido pelo aparelho.
Pense no aparelho agora apenas como um servidor web que pode ser na
Science Center.
Poderia ser na web real.
Por isso, é acessível ao público.
>> Então, claramente, há alguma maneira de passar formar entradas de campo para um servidor
de modo que ela pode fazer alguma coisa com eles.
Infelizmente, register0 é muito estúpido.
Tudo que faz é imprimir um array que se parece com isso.
E não é uma matriz na sentido que nós conhecemos.
Acontece que o PHP, e um monte de línguas, ter não só numericamente
arrays indexados cujo primeiro índice é zero, um, dois, em seguida, depois do ponto,
ponto, ponto, n menos 1.
>> Isto é o que é chamado de array associativo.
Uma matriz associativa é aquele em que você pode armazenar pares de valores-chave onde
a chave não é necessariamente um número.
Poderia ser de fato uma corda, uma palavra.
E por isso este pode ser implementado, debaixo do capô, ao que parece,
utilizando uma estrutura de dados conhecida como um?
Pensei que algo dramático estava prestes a acontecer -
tabela de hash.
>> Assim, uma tabela hash, aviso, aqueles de vocês quem fez isso para P set 6, ou até mesmo recordar
ele, pelo menos, mesmo se você fez uma tentativa, um tabela hash, em nosso uso, foi usada para
armazenar apenas palavras.
Mas, realmente, você estava armazenando chaves e valores.
Se você implementou uma tabela hash para P set 6 dicionário, as chaves estavam a
palavras em si, e os valores foram efetivamente verdadeiro ou falso.
Sim, aqui, ou implicitamente, Não, aqui não.
>> Bem, podemos generalizar essa idéia.
E nós poderíamos usar uma base de dados muito semelhantes estrutura para armazenar a string não
-se sozinho em sua tabela hash, mas supor que em cada um de seu haxixe
nós da tabela.
E você pode até fazer isso em uma tentativa ao invés de apenas ter um bool.
Você poderia ter algo mais.
E se a chave não estava Maxwell, para instância, mas citação unquote "nome", ou
Citando "capitão". unquote E dentro de sua estrutura de dados C, você coloca um
valor, e não apenas um valor booleano, mas de valor como citação unquote "David", ou
"M", ou "Matthews", e assim por diante.
>> Então, essas mesmas estruturas de dados que usamos aparentemente existem em outras línguas.
E eu diria que eles são realmente muito, muito mais simples de acessar aqui.
Vamos, de facto, dar uma olhada agora, em algum tal sintaxe.
>> Eu estou indo para ir em um diretório PHP.
E eu vou abrir uma melhor versão de Olá-0 de antes.
Observe que tudo que fiz foi acrescentar alguns comentários.
Então, podemos nos livrar dessa distração.
>> E este programa faz realmente imprime Olá, porque eu especifiquei entre
marcas que eu quero executar esse código.
Agora, vamos ver em um momento Por que isso é útil.
Mas vamos abrir um outro exemplo aqui.
Deixe-me ir em frente e abrir dizer: gedit condições de uma.
>> Este é o caminho de volta no tempo.
Mas semanas atrás, eu acho que, em uma semana ou duas semanas, tivemos um exemplo chamado
conditions1.c.
E eu decidi reimplementar em PHP, apenas a espécie de salientar que
PHP, sintaticamente, é quase idêntico para C. Isto não é um enorme salto
da semana passada para esta.
>> Observe na parte superior do programa, que começa, como antes, com alguma
comentários, que eu vou me livrar como uma distração.
Repare que eu estou em PHP Modo neste arquivo.
Então esse código, vamos ver, serão executados.
Observe que há readline, que é, provavelmente, o
***ógico em PHP de getstring.
Observe que é um pouco diferente.
Você realmente especificar um aviso para o função chamada linha lida, e isso é
o que o usuário vê.
Então você não tem que printf manualmente.
Mas isso não é um grande negócio.
Eu vou guardar, dentro de $ n, o valor desse retorno, então qualquer que seja o
usuário digita é a sua int.
E aqui está outra curiosidade.
Acontece que, em PHP, qualquer variável só tem que ser prefixado
com um cifrão.
É um pouco chato.
Mas repare que eu não fiz em PHP.
O que está faltando na mão esquerda lado do sinal de igual?
>> Nenhuma menção do tipo.
Então, isso é diferente de C. Para melhor ou para o mal, o PHP é uma vagamente
linguagem digitado.
Ele tem números.
Ela tem strings.
Ela tem booleanos.
E ele tem um pouco outros tipos de dados.
Mas você, o programador, geralmente não precisa se preocupar com eles.
A vantagem disso é que ele faz um pouco mais fácil de programar.
Você pode pensar um pouco menos.
A desvantagem é que também lhe abre para possíveis bugs, se você acidentalmente
tratar um número como uma string, uma string como um número, potencialmente, mas mesmo
então, PHP, e um monte de línguas, são muito tolerantes.
Eles vão usar o que é chamado conversão implícita.
E se você tentar usar n, no contexto de uma situação numérica, será
converter o que aqui vai ser um string, porque, se o usuário digita
algo, e você obterá o resultado, como com readline, ou chegar a string,
que vai retornar uma string.
>> Mas note, algumas linhas depois, eu verificar se n for maior do que zero.
Então PHP vai lançar implicitamente minha 123 "string", ou o que o usuário
tipos de, em um int.
Assim, em breve, o material só funciona muito mais intuitiva.
Assim, temos agora começar a relaxar algumas das as coisas que fizemos no passado.
>> Uma grande quantidade deste material é o mesmo, no entanto.
Ainda não é igual a igual.
Como um aparte PHP também é igual é igual iguais, mas mais sobre isso, talvez, em
futuro.
Essa foi uma.
Typo mas dois sinais de igual significa a mesma coisa como antes, para comparação.
printf significa a mesma coisa que antes.
Barra invertida n significa o mesmo coisa como antes.
>> Então, como faço para executar este programa?
Bem, como antes, se eu fizer PHP, conditions1.php e digite
um número como 123.
Esse é um número positivo.
Se eu digitar 0, I escolher 0.
E se eu digitar 123 negativo, eu fico fazer um número negativo, que é apenas
quer dizer, sintaticamente, PHP é super, super similar.
>> Então, por que isso agora útil em um contexto web?
Bem, vamos voltar a este froshims exemplo, que parecia,
novamente, como esta aqui.
E vamos realmente puxar para cima a página web novamente, o que parecia ser isso.
O que podemos fazer com o dados que são apresentados?
>> Bem, deixe-me abrir uma nova versão deste.
E você vai ver que o problema especificação sets anda você
através de alguns deles.
Ao invés de começar com zero, vamos olhar para froshims3,
que faz um pouco mais.
>> Observe primeiro, na verdade, vamos abrir o que 0 é, então você vê
o registro 0 era.
Observe o registro 0 fez.
Um deles, eu tenho comentários no topo.
Excluir os e focar apenas isso.
A maior parte do conteúdo de register0.php são, obviamente, que língua?
Apenas PHP cru.
>> Assim, o aviso prévio, este arquivo não começar com, no momento, o suporte aberto,
ponto de interrogação, PHP.
PHP não permite que você se misturam Código PHP com tags HTML.
Mas eu fiz isso aqui dentro da página aqui.
>> Agora, novamente, você só sabe que isso depois olhou para o manual. print_r,
ao que parece, é print_recursive. _recursive E este é apenas um prático
função de utilidade que apenas imprime, recursiva, o que você entregá-lo.
Se você entregá-lo de uma matriz, ele vai imprimir um array.
Se você entregá-lo um número, ele vai imprimir um número.
Entregá-lo a corda, ele vai imprimir uma string.
Se você entregá-lo uma tabela hash, ele irá imprimir uma tabela hash.
Você não tem que escrever tudo de que o código sozinho.
>> Agora note que eu estou entrando Modo PHP aqui.
Estou saindo do modo PHP aqui.
Assim, quando o servidor web lê este arquivo de cima para baixo, da esquerda para a direita, porque
termina em um arquivo chamado. php, tudo o que não está dentro de tags PHP é
só vai ser espeto fora, como HTML puro.
Não é grande coisa.
Mas tão logo o servidor web percebe isso, ele vai dizer que eu não deveria
cuspir, literalmente, print_r do post.
Eu deveria executar o seguinte linha de código.
>> Assim, a última pergunta, então, é este arquivo é, bem, o que diabos é isso?
Tome um palpite.
O que é de R $ _POST, provavelmente?
>> AUDIÊNCIA: [inaudível]
>> COLUNA 1: Sim, os dados postados.
Lembre-se, vamos rolar de volta tempo por apenas um momento.
froshim0, mais uma vez, ficou assim.
Um super maioria deste é apenas HTML.
Mais uma vez, algumas marcas que você não tem visto ainda, ou com os quais
você já está familiarizado.
Mas o interessante foi isso.
Esta linha é o que realmente une para o nosso arquivo register0.php.
Estou enviando via método post.
E isso significa que os parâmetros o usuário digita não são
vai acabar onde.
>> Eles não vão para aparecer na URL.
Eles ainda vão ser enviadas a partir do do cliente, a partir do navegador, o
servidor, mas apenas através de algum outro mecanismo que vamos renunciar a nossas mãos
no para hoje, mas não é na URL.
Mas note a relação agora com post, que, por convenção, é
minúsculas aqui.
>> Mas se eu abrir register0.php, Estou aparentemente imprimir este.
Portanto, esta é uma espécie de estranho convenção de nomenclatura.
Mas o que é bom em PHP é que, quando utilizando PHP em um contexto web, não em um
linha de comando, como eu fiz há pouco, quando você está realmente usá-lo em um web
página, em um diretório VHost como somos, PHP automaticamente irá preencher esta
coisa, que é uma matriz associativa, por assim dizer, uma tabela hash, com
tudo o que o usuário digitou dentro
>> Em suma, $ _POST em todas as tampas é um variável global que o PHP apenas
magicamente cria para você quando utilizando PHP em um contexto web.
E ele coloca dentro de tudo do nomes dos parâmetros na forma em que
foi submetido a este arquivo e todos os valores que o usuário digitou dentro
Por isso, entrega-lhe o que o usuário digitado no formulário.
>> Então, antes, temos de saída realmente estúpido de apenas vendo isso, porque tudo o que fiz
foi recursivamente imprimir este array.
A chave é o nome, o valor é David.
A chave é o capitão.
O valor está ligado.
E a seta dupla e do ângulo suporte de lá, isto é apenas arbitrária.
Isto não é um código.
Esta é apenas uma maneira de mostrar que você do PHP qual é o valor de alguma chave é.
>> Mas agora deixe-me propor que, em froshIMs3, é quase idêntico
exceto que ele se submete a esse arquivo.
E, novamente, vamos meio que olhar para isso, só para ver alguns
sintaxe, mas observe o que esse arquivo faz.
Dar um palpite baseado apenas nas linhas de código, o que provavelmente se parecem com
Grego, em certa medida, aparentemente está fazendo.
>> Este arquivo é de alguma forma relacionados ao correio, e-mail.
Então o que é este programa está fazendo?
Nesta versão, se eu fosse realmente preencha este formulário - e deixe-me ir para
froshIMs3, não froshIMs0 -
a forma parece o mesmo.
David, capitão, do sexo masculino, dormitório, Matthews.
Mas se eu enviar isso, este arquivo é indo para ir para register3.php.
>> E eu afirmo, de olhar para ele é código-fonte, que vai
envolvem alguma forma de e-mail.
Deixe-me ir em frente e abrir este em uma janela maior, então nós
pode vê-la mais limpa.
Estamos em VHosts, host local, público, froshims.
Vou abrir uma diferente programa, apenas para que
pode ver mais de uma só vez.
>> Então, agora aqui, observe algumas coisas.
Na parte superior do arquivo é aberto suporte, ponto de interrogação, PHP.
Depois, há um monte de comentários, que podemos ignorar, é
desinteressante para agora.
>> Agora há este.
Acontece PHP tem um monte de código chamado necessita.
É muito semelhante em espírito ao C do incluir, mistura include, que
essencialmente agarra o conteúdo de alguns outro arquivo e apenas se estatela-los aqui,
para que você possa usá-los.
Neste caso, o aparelho tem, pré-instalado, uma biblioteca, livre e
biblioteca de código aberto chamado PHP mailer que qualquer um pode
baixar da internet.
Nós só fizemos isso por você.
E isso significa que agora tenho e-mail funcionalidade à minha disposição.
>> Agora, observe algumas coisas.
Eu estou indo para validar a submissão do formulário.
Acontece que PHP, um, tem de exclamação pontos para o operador, não apenas como
C. Mas o PHP também tem uma função chamado vazio.
>> Vazio, apenas retorna true se o valor da coisa que você entregá-lo
parênteses está vazia, como o usuário não digitar nada dentro
Então, isso está dizendo, e observará o sintaxe, lembra muito C, se o
chave de nome, de modo que o campo nome no formulário, que foi submetido via correio, por
o usuário, não é vazia, e sua gênero não é vazio na forma como
bem, e seu dormitório não é vazio -
mas repare que eu não me importo com o capitão, então o que é que vamos fazer?
>> Eu estou indo para executar esta linha de código.
E você pode pensar neste tipo de como malloc, mas é um pouco
mais sofisticado do que isso.
Mas por enquanto isso me dá uma especial struct do tipo PHP mailer.
Mas ignorar a palavra-chave new para hoje.
>> Agora eu vou chamar uma função chamada IsSMTP, que diz: usar SMTP.
Esta é a porta 25, assim como o vídeo na semana passada, quando a coisa estava jogando
e-mails para o firewall.
A porta 25 é SMTP.
SMTP significa usar o servidor de e-mail.
Qual deles, podemos usar Harvard SMTP.fas.harvard.edu.
>> Podemos definir a partir do endereço ser John Harvard.
Se eu rolar mais longe, eu posso definir o endereço do destinatário, apenas
arbitrariamente, ser John Harvard é assim.
Então, ele vai ser o próprio e-mail.
>> Agora eu posso definir o assunto ser de registo.
E eu posso definir o corpo de e-mail da seguinte forma.
Essa linha parece um pouco mais enigmática, mas isso é apenas porque há muito
da informação nele contida.
Um deles, há um operador ponto.
Alguém já deve saber o que o operador ponto faz.
É concatenação.
Então, se você quiser ter uma string em PHP, e anexá-la, ou preceder-lo,
outra cadeia em PHP, graças a Deus você não tem que usar strcopy e malloc,
e tudo isso mais.
>> Se você quiser concatenar duas strings, que se preocupa com a memória.
Vamos figura PHP que para você.
O PHP vai fazer com o operador ponto aqui é só fazer uma grande frase fora
desta linha, esta linha, Nesta linha, esta linha.
E agora, o aviso prévio, que vai a ligar os valores.
Assim, o e-mail que John Harvard vai a receber é, literalmente, vai dizer
nome, cólon, algo melhor, então nós fechar a corda e concatenar em
o que o usuário digitou no, então uma nova linha.
>> Em seguida, na próxima linha de John Harvard e-mail, ele vai dizer
Capitão, On ou Nada.
Vai dizer sexo, masculino ou feminino.
Dormitório vai ser Matthews no meu caso.
E, em seguida, perceber vírgula familiarizado no final.
E então, aqui em baixo, o aviso prévio, um pouco enigmática ainda, mas, novamente, seguindo uma
padrão que vai se tornar mais familiar P após ajuste 7, se o envio de e-mail
retorna false, então vá em frente e morrer.
>> Então, PHP tem uma função chamada morrer, que, literalmente, apenas mata o
website e apenas imprime o que você diga a ele - o seu está morrendo
palavras, por assim dizer.
E que, no caso, ele irá imprimir o que a informação de erro é de
o que aconteceu para dar errado.
Assim, longa história curta aqui, o que temos é um exemplo em que, quando o utilizador
envia o formulário, froshim0, froshims3.php, ele vai para
register3.php.
Mas register3.php prossegue então para executar todas estas linhas.
>> Portanto, há algumas desmarcações tomar aqui.
Uma, é aparentemente bastante fácil, programaticamente, para enviar e-mails,
o que é bom.
Quando os usuários se inscrever para o seu site, em Neste caso, quando se registrar para o seu
esporte, você pode enviar o calouro Proctor, ou John
Harvard, neste caso.
>> Mas isso também significa que você pode fazer o que?
Enviar e-mails a partir de qualquer um a qualquer um.
E isso é muito verdadeiro.
Isto não é tão fácil de fazer se você está acostumado a usar o Gmail.
Mas se você já usou ou Eudora Outlook, você pode muito bem contar uma
servidor de correio que você é quem quiser.
E é aí que eu preciso para colocar em esse chapéu e dizer: não faça isso.
Mas isso é prova de quão fácil é para realizar ataques de phishing, e
enviar e-mails anônimos e Spam, de modo mais geral.
E ela realmente se resume à fato de que tudo o que você precisa é de alguns
acesso programático.
>> Como um aparte, o meu encontro mais próximo com a placa do anúncio, o meu primeiro ano,
Foi quando eu descobri isso legal truque que, uau, você pode
enviar e-mails a partir de qualquer um.
E assim estávamos tendo algum estúpido argumento, literalmente, em Matthews,
entre o meu grupo Proctor.
Eu nem me lembro qual era o problema.
Mas eu queria tentar colocar um fim a este debate estúpido.
>> Então eu decidi que só vai enviar um e-mail para o meu grupo Proctor, fingindo ser
o outro cara, com cuja opinião eu discordou, e tê-lo concordar com
qualquer que seja minha opinião foi em este debate particular.
E assim eu forjou este e-mail através de um técnica similar em espírito para isso.
Mas foi realmente mais fácil no momento.
Clique em enviar.
Ele não estava satisfeito, nem ter sido a placa do anúncio.
>> E eu estava muito rapidamente capturadas na segundo, porque, como você sabe, eu assino
meus e-mails de uma certa maneira.
E apesar de eu fazê-lo manualmente, em grande parte, 15 anos depois, porque eu estava
traumatizado por isso.
Eu não tenho uma assinatura no meu e-mail agora.
Mas em 1995, eu só tinha um sig, uma assinatura no meu e-mail.
Então houve essa nota dizendo, Dear Grupo Proctor, eu aquiescer minha opinião
e concordo com David, assinado assim e assim, nova linha, nova linha, DJM.
>> Portanto, não faça isso, ou, em geral, tomar vantagem desta técnica.
Mas quando fazer um site, como, por seu projeto final, ao fazer uma
site para algo empreendedor, é assim que, pragmaticamente, é possível
alavancar outros serviços na internet como e-mail e, em seguida, na verdade,
enviar coisas usando código.
>> Então, como podemos melhorar isso?
Bem, primeiro vamos dar um rápido passeio algumas das coisas que você vai ver,
e, em seguida, dar uma olhada um par de exemplos.
Então um, para tranquilizar, porque nós estamos voando através do PHP.
E eu sei que, em algum momento, você vai ter para realmente começar a escrever este se
não o tenha feito.
Perceba que, um, principal espécie de fora da janela com PHP.
Se você quiser escrever um código que recebe executado, basta começar a escrever em
um arquivo chamado. php enquanto você tem o suporte aberto
ponto de interrogação PHP tag.
>> Mas observe estes são condições em PHP.
Note, este é exatamente o mesmo slide tivemos em uma semana, quando tivemos
em condições em condições C. PHP são estruturalmente e
sintaticamente o mesmo.
Única verdadeira diferença é se você tem variáveis envolvidas, você tem aqueles
cifrões.
>> Enquanto isso, as expressões booleanas olhar apenas como este para
ou-ing ou e-ing juntos.
Switches exatamente o mesmo.
O que é bom em PHP, enquanto que no C, interruptores tem que ser em casos
primitivos como inteiros ou chars, em PHP suas declarações de casos pode realmente ser
sobre toda uma corda, que é na verdade, uma espécie de bom.
Poupa-lhe algum tempo.
Não poderia fazer isso em C.
>> Aqui está um loop no PHP.
É idêntico.
Pode ter alguns cifrões para as variáveis.
Você não tem que mencionar que algo é um int.
Você apenas declará-lo com um sinal de dólar e o nome da variável.
Mas um loop é o mesmo.
Um loop while é o mesmo.
A fazer loop while é o mesmo.
>> Este é um pouco diferente.
Assim, com PHP, com uma matriz, você pode estaticamente declarar uma matriz, como em C,
mas você usa colchetes.
Em C, você poderia usar chaves, se você mesmo sabia disso.
Mas isso é realmente muito comum em PHP para declarar uma matriz, no caso em apreço,
de números, e chamar o número de variáveis.
>> Próprias variáveis semelhante a este.
Aqui está uma corda, citação de citação "Olá mundo. "Você poderia ter uma barra invertida n.
Eu simplesmente não neste caso.
>> Agora, esta é uma construção interessante.
C não tem isso.
Mas isso é super útil.
E você vai ver isso em P set 7 especificação - um para cada constructo.
Se você quer reiterar sobre toda a elementos de uma matriz, você não tem
para lidar com i $ e $ n, e + +, e tudo isso.
Você pode literalmente dizer, em PHP, este -
para cada números como número, de modo Estou assumindo que $ números
é uma matriz de números.
E quando eu digo para cada número como o número, este vai
automaticamente, como o meu loop é executado, actualizar, em cada iteração, o valor
dentro do número de cifrão -
novamente, e novamente, e novamente caminhando para mim sobre essa matriz.
Por isso, só nos salva código.
Não há ponto e vírgula, sem + + 's, no i é, não n da, é apenas bom.
>> Mas o PHP também tem isso.
E isso é super poderoso.
E você vai usar isso, mãos diante, em conjunto P 7.
E matriz associativa também é declarada com colchetes.
Mas observe a sintaxe agora.
É uma reminiscência do que vimos com print_r um momento atrás.
Quantas chaves, como um pouco de verificação de sanidade, que essa matriz parecem ter.
>> Por isso, tem dois.
E chamam isso de uma matriz.
Mas, se isso ajuda, você pode pensar desta tabela, como mistura, ou como
uma matriz associativa.
Mas é apenas uma diferente tipo de matriz.
E, novamente, línguas diferentes tê-los.
Vamos ver algo semelhante em JavaScript também.
Há duas chaves.
Um deles é entre aspas, "símbolo", uma é citar unquote "preço". E essas chaves
cada um tem um valor.
Neste caso, o valor do símbolo é FB, por Valor Facebook, e de preço é de 49, 26,
que era das ações da Facebook preço a partir desta manhã.
>> Então, o que é útil sobre uma matriz associativa.
Eu poderia ter tido um numericamente matriz indexada com apenas
simples colchetes.
E eu poderia ter tido cifrão Citação equivale exatamente isso.
Deixe-me realmente fazê-lo.
Suponha que eu ao invés de apenas declarou essa matriz assim.
Isto é perfeitamente válida, sintaticamente.
Ele não perde nenhuma informação, per si.
Eu ainda vejo que o símbolo é fb, e que o preço é 49, 26.
Então, por que são associativas matrizes atraente?
>> AUDIÊNCIA: Você não tem que se lembrar onde você coloca coisas.
>> COLUNA 1: Exatamente, você não tem se lembrar de onde você coloca coisas.
Você não tem que se lembrar arbitrariamente que o símbolo da ação está na faixa de zero,
e os preços das ações está em um suporte, o que é particularmente perigoso se
mudar as coisas, eventualmente.
É muito mais agradável para associar o que vamos chamar de metadados
com seus dados reais.
Eu diria que o que realmente importa E aqui é fb e 49, 26.
O símbolo eo preço é de metadados que descreve os dados que
realmente se preocupam.
Mas este é apenas muito mais fácil acesso.
>> Agora, como um aparte o que é o preço que pagamos?
Estamos fazendo isso em CS50 por semanas.
Este recurso deve vir com algum custo.
Memória.
Então, você não está apenas armazenando a 32-bit número inteiro, por exemplo.
Você está armazenando símbolo / 0, provavelmente.
Então você está usando mais memória.
>> E qual é o desempenho de procurando algo em uma
matriz associativa, provavelmente?
É provavelmente mais lento.
De acesso aleatório é agradável, especialmente quando você pode fazer busca binária.
Mas se você está realmente olhando agora não por números, mas por cordas, este
verdadeiramente é implementado sob a capuz, provavelmente como uma tabela hash, onde
você usar uma tabela hash com encadeamento separado.
Ou você usa uma tentativa de realmente armazenar os valores.
Então, talvez você possa fazer o tempo constante, mas você ainda tem que olhar para S-Y-M-B-O-L,
potencialmente, em vez de apenas 32 bits para procurar alguma coisa.
Então, novamente, essas mesmas idéias que vem voltar a se repetir neste contexto.
>> Mas, novamente, PHP agora tem alguns super- globals que, ao que parece, são
arrays associativos.
Vimos um momento atrás, $ _POST.
E essa super-mundial tem chaves e valores.
Especificamente, as teclas alinhar-se com o quê?
Onde é que as chaves $ _POST vem?
Apenas para recapitular?
>> AUDIÊNCIA: Nome.
>> COLUNA 1: Nome, onde?
>> AUDIÊNCIA: [inaudível]
>> COLUNA 1: Nome é o atributo.
Bem, onde, de onde eles originalmente vem?
O formulário.
Então, se uma página HTML tem uma tag de formulário, no interior dos quais são algumas entradas, como
caixas, caixas de texto, desça menus, cada um dos quais tem um nome, estes
nomes acabar como chaves em $ _POST, e, francamente, para que o assunto, $ _GET.
Se o método é get, mesma idéia.
É apenas de uma forma diferente de super global.
E os valores de, é claro, a partir de vir o que o usuário digitou no seu ou
seu browser.
>> Mas há alguns outros.
Há cookie, que vamos voltar eventualmente.
Mas essas são as coisas que você sabe a web usa por algum bem ou o mal.
Mas vamos voltar a isso.
Servidor e sessão, e os dois ter alguma utilidade especial.
>> Mas vamos dar uma olhada nisso.
Deixe-me ir em frente e abrir um exemplo chamado mvc0.php Então MVC
significa o seguinte.
E nós apresentamos este mais cedo do que é típico, na verdade, para você projetar
7 Conjunto de problemas, e também os projectos finais em uma espécie de indústria
forma padrão e forma limpa.
É bom design.
>> Então, você está prestes a ver, e você vai experiência em P set 7, paradigma, tipo
de uma mentalidade de programação, que parece um pouco algo como isto.
M para o modelo, C para Controller, V para View.
Longa história curta, MVC é apenas um tipo de uma metodologia, uma maneira de fazer
sites, em particular, através do qual você colocar toda a sua, a frase estúpida -
lógica de negócios -
todos de sua propriedade intelectual no o que é chamado um controlador, um arquivo
como index.php, ou veremos, quote.php ou buy.php.
>> No contexto de um conjunto de problemas 7, o seu modelos geralmente contêm os dados,
qualquer coisa relacionada a um banco de dados, como veremos eventualmente ver, e seus pontos de vista
conter a estética do seu site, o HTML, o CSS.
Então, já vimos isso em C um pouco bit usando arquivos h..
Realmente vi há pouco com CSS, por factoring a estilização CSS
coisas fora do nosso HTML.
>> Então MVC é realmente apenas sobre desenho linhas na areia e dizer: o
código de programação interessante para o seu site pertence a que chamaremos o
controlador.
Coisas relacionadas ao banco de dados normalmente acaba em um modelo.
Mas você vai ver, em conjunto Problema 7, nós fundem C e M para mantê-lo simples.
Mas a visão é o lugar onde todo o seu HTML e estética tipicamente ir.
>> Então, o que isso significa em termos reais?
Bem, deixe-me ir para o nosso MVC diretório como se segue.
E você vai ver mais destes excursionou por meio da especificação.
Assim, em mvc0, eu afirmo que isto é, como, Versão 0 de sites do CS50.
>> Tudo o que temos é um pouco de HTML, como uma grande etiqueta de h1, aparentemente.
E, em seguida, uma lista com marcadores.
Eu nunca vi uma lista com marcadores antes, mas não é grande coisa.
Vamos rapidamente olhar para o código fonte.
Acontece que uma lista não ordenada com balas ul suporte é aberto com um ou
mais itens da lista, Li.
Então, aviso aqui é uma marca de âncora.
Vimos que um momento atrás.
>> Então é assim que eu implementei nesta página.
Tenho dois links, dois itens de lista, um ul para lista não ordenada, e no final
resultado, esteticamente, isso é muito site bonito, versão 0 aqui.
Mas o que é interessante agora é saber como este é implementado sob o capô.
>> Deixe-me ir para gedit e abrir este primeiro exemplo, para pintar um quadro.
E nós vamos olhar o que está falho, potencialmente, aqui.
Agora, se eu entro em localhost, público, MVC, observe alguns arquivos.
Eu vou ligar para eles, para o momento, todos os controladores.
Mas isso é um pouco de abuso, porque você verá tudo está misturado
dentro delas.
>> E deixe-me ir para dentro de index.php.
E podemos ver, literalmente, o mesmo HTML.
Assim, mesmo que este arquivo termina em . Php, Isso não significa que tem que
tem algum código PHP.
Pode ser apenas HTML puro, embora isso é meio bobo.
Mas note que não há suporte aberto PHP marcar, com exceção para isso, o que, francamente,
está ali apenas para servir como um comentário.
Mas isso não é funcionalmente até que interessante.
>> Mas perceber isso.
O que é interessante agora é o que alterações nesta página.
Deixe-me clique Palestras.
E observe a URL está prestes a mudar.
Agora estou no lectures.php.
Deixe-me clique zero.
Agora estou no week0.php E agora vamos me abrir esses arquivos no gedit.
Não apenas o índice, mas vamos me abrir palestras.
E deixe-me livrar-se dos comentários focar apenas esta parte.
>> E agora deixe-me abrir apenas mais um, week0.php, jogue fora os comentários,
apenas para limpar isso.
E agora perceber o seguinte.
Pensando realmente tipo de cuidado sobre design, e vamos fazê-lo de linha
acima da mesma, o que pode ser feito melhor aqui, que você acha?
>> Como é que eu faço uma semana um?
Como sobre isso.
Então é assim que eu fiz uma semana.
Fui até Arquivo, Novo, Pasta, Salvar week1.php, e então eu fui aqui.
E eu mudei um -
o que era aquilo, uma para sexta-feira.
Mudei os zeros a um.
Eu mudei isso para uma.
>> OK, então agora olhar para os meus arquivos.
O que poderia ser feito de forma diferente?
Onde está a oportunidade, talvez?
Portanto, há a oportunidade de começar factoring essas coisas para fora.
Deixe-me abrir, como um spoiler, para o que você vai ver em P set 7.
Se eu abrir-se, agora, na versão index.php cinco disto, parece muito
mais enigmática, na verdade.
>> Mas isso, agora, é o que eu chamo um controlador que está controlando a
lógica da minha página.
E você pode tipo de reconstruir, intuitivamente, talvez, o que está acontecendo.
Na primeira linha, é um pouco enigmática.
Mas repare que eu estou exigindo, como com include afiada, um arquivo chamado
helpers.php.
E então eu estou chamando, aparentemente, um função, chamada render, passando
dois argumentos.
>> Uma delas é citação unquote, cabeçalho.
E o outro é, que tipo de tipo de dados é esta, baseada em
no nosso anterior sintaxe?
É uma matriz associada.
Especificamente, ele está passando no título com alguns metadados que lembra
me o que é e seu valor.
Então eu vejo um disco codificado ul, de modo algum HTML puro.
Mas, então, eu estou de volta no modo PHP chamando a renderização função.
Assim, mesmo se você nunca usou HTML ou PHP antes, e mesmo que isso parece
mais assustador, porque este é, provavelmente, melhor design?
O que há de melhor sobre o assunto, baseada em inferência?
>> AUDIÊNCIA: [inaudível]
>> COLUNA 1: Menos redundante em que não há nenhuma tag HTML mais, não mais
cabeças tag, não mais tag body em todos os arquivos de maldição.
Em vez disso, eu tenho consignado o semelhanças e, presumivelmente, colocá-los
em um arquivo de alguma forma relacionados a um cabeçalho.
Ea mesma coisa para o corpo perto tag, a tag HTML perto.
Isso é provavelmente aqui dentro em algum lugar do rodapé.
E você vai ver, em conjunto Problema 7, um pequeno passeio por isso.
>> Então, o que está por vir?
A única coisa que não tem a capacidade ainda para é realmente armazenar dados.
E então o que nós vamos começar a ver Quarta-feira, por exemplo, é que o seu
velho amigo Excel, ou números, permite que você armazene muitas
dados em linhas e colunas.
Acontece que você pode fazer isso no que é chamado de um banco de dados, por meio de programação.
maníaco E acontece que, depois disso, nós vamos ser capazes de armazenar coisas como
isso, o que você vai ver de novo em conjunto P 7, um monte de nomes de usuários e
palavras-passe, o último dos quais está realmente criptografado, assim como eles
estavam em edição pirata da P set 2.
E, finalmente, você vai implementar isso, o seu próprio site eTrade-assim
implementa coletivamente CS50 finanças.
>> Por último, uma vez que você ficou aqui tão tarde hoje, se você voltar a esta parte
do campus, às 4:00 horas de hoje, vamos dar-lhe não só aconselhamento, a SCES
Assessoria Fair, em 4:00 no Maxwell-Dworkin, nós vamos dar-lhe algumas
Americone sonho, Cereja Garcia, Chocolate Fudge Brownie, Chocolate
Chip Cookie Dough, e, quando você Google Chunky Monkey, você consegue isso.
Então, tudo isso espera às 4:00 PM de Maxwell-Dworkin.
Vejo você na quarta-feira também.
>> COLUNA 2: Na próxima CS50, RJ dorme dentro
>> RJ: Minha seção!
Ha!
Oh,